473,320 Members | 1,724 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

scroll a table

Hello,

I have put a table in a scrollable DIV so that only one part of the
table is visible.
Now, I want that, when I scroll, the table is scrolled item by item in
the table (as it is done when we scroll in a SELECT box).

How can I do that?
Can I change the scroll step of the DIV? (to set 1 scroll step =
line's height in the table)

Thanks,

Veronique
Jul 23 '05 #1
7 1887
Here is the solution I have found:

<body>
<div id="mydiv" style="width:100;overflow:auto;background-color:#eeeeee;"
onscroll="scroll(this)">
<table id="tblobjest1" class="lst" cellspacing="0" cellpadding="0"

<tr id="row"><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
<tr><td>Row 6</td></tr>
<tr><td>Row 7</td></tr>
<tr><td>Row 8</td></tr>
<tr><td>Row 9</td></tr>
<tr><td>Row 10</td></tr>
<tr><td>Row 11</td></tr>
<tr><td>Row 12</td></tr>
<tr><td>Row 13</td></tr>
<tr><td>Row 14</td></tr>
<tr><td>Row 15</td></tr>
<tr><td>Row 16</td></tr>
<tr><td>Row 17</td></tr>
<tr><td>Row 18</td></tr>
<tr><td>Row 19</td></tr>
<tr><td>Row 20</td></tr>
</table>
</div>

<script language='javascript'>

var realLastScrollTop = 0;
var currentLastScrollTop = 0;
var nbLines = 4;

// init the "table" height
document.all['mydiv'].style.height = document.all['row'].clientHeight
* nbLines;

function scroll(o) {

var cellHeight = document.all['row'].clientHeight;

if (currentLastScrollTop == o.scrollTop) {
// scroll action is stabilized
if (realLastScrollTop < o.scrollTop) {
o.scrollTop = (parseInt(o.scrollTop/cellHeight)+1)*cellHeight;
}
else {
if (o.scrollTop > (nbLines -1 * cellHeight)) {
o.scrollTop = parseInt(o.scrollTop/cellHeight)*cellHeight;
}
}
realLastScrollTop = o.scrollTop;
}
currentLastScrollTop=o.scrollTop;

}

</script>
Jul 23 '05 #2
In article <7a**************************@posting.google.com >,
vr****@ceitel.fr enlightened us with...
Here is the solution I have found:


Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.

--
--
~kaeli~
Why do people who know the least know it the loudest?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #3
kaeli <ti******@NOSPAM.comcast.net> wrote:
In article <7a**************************@posting.google.com >,
vr****@ceitel.fr enlightened us with...
Here is the solution I have found:


Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.


How much is IE only? He uses syntax like:

var cellHeight = document.all['row'].clientHeight;

which can be made browser-independent by changing it to:

var cellHeight = document.getElementById("row").clientHeight;

After clearing up addressing issues like that, what's left? Is
"clientHeight" maybe an IE only property?

--
Tim Slattery
Sl********@bls.gov
Jul 23 '05 #4
Tim Slattery <Sl********@bls.gov> writes:
kaeli <ti******@NOSPAM.comcast.net> wrote:
In article <7a**************************@posting.google.com >,
vr****@ceitel.fr enlightened us with...
Here is the solution I have found:

Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.


How much is IE only?


Hard to say. Since Opera is getting better and better at emulating IE,
some of it might not be IE-only, but will still fail in Mozilla.
He uses syntax like:

var cellHeight = document.all['row'].clientHeight;

which can be made browser-independent by changing it to:
Nothing is browser independent - Netscape 1 is still a browser :) So,
you have to make some assumptions about the browsers on the receiving
end. The fewer the better, but there will always be some.
var cellHeight = document.getElementById("row").clientHeight; After clearing up addressing issues like that, what's left? Is
"clientHeight" maybe an IE only property?


In Mozilla, "clientHeight" seems to always give 0 for a table row.
So, probably.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #5
In article <oc********************************@4ax.com>,
Sl********@bls.gov enlightened us with...

How much is IE only? He uses syntax like:

var cellHeight = document.all['row'].clientHeight;

which can be made browser-independent by changing it to:

var cellHeight = document.getElementById("row").clientHeight;

After clearing up addressing issues like that, what's left? Is
"clientHeight" maybe an IE only property?


I am pretty sure clientHeight is IE only as well, but I was mostly
looking at the document.all stuff.

I am also not sure about the support for scrollTop.

AFAIK, both clientHeight and scrollTop are IE only, but someone correct
me if I'm wrong.

--
--
~kaeli~
Synonym: the word you use in place of a word you can't
spell.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #6
kaeli <ti******@NOSPAM.comcast.net> wrote:
In article <7a**************************@posting.google.com >,
vr****@ceitel.fr enlightened us with...
Here is the solution I have found:


Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.


A little research shows that this syntax works in Mozilla Firefox:

<table>
<thead>
<tr>
<!-- <td> elements for the table headers -->
</tr>
<tbody style="overflow:auto;height:200px">
<!-- <tr> elements and <td> elements defining a bunch of rows -->
</tbody>
<table>

This causes the a 200 pixel tall block of the body of the table to be
shown, along with a vertical scrollbar on the right side! For some
reason, Firefox decided to show only 387 pixels (as shown by the DOM
inspector) horizontally, and gave me a horizontal scroll bar as well!
I assume that I could explicitly specify a width in the style
attribute to control this tendency.

Submitting the same page to IE showed a very bizarre result: IE made
EACH ROW in the body 200 pixels tall! And MS now says they will update
IE only for new operating system releases. AAAUUUGGGG!!!

--
Tim Slattery
Sl********@bls.gov
Jul 23 '05 #7
Tim Slattery <Sl********@bls.gov> wrote:
kaeli <ti******@NOSPAM.comcast.net> wrote:
In article <7a**************************@posting.google.com >,
vr****@ceitel.fr enlightened us with...
Here is the solution I have found:


Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.


A little research shows that this syntax works in Mozilla Firefox:

<table>
<thead>
<tr>
<!-- <td> elements for the table headers -->
</tr>
<tbody style="overflow:auto;height:200px">
<!-- <tr> elements and <td> elements defining a bunch of rows -->
</tbody>
<table>

This causes the a 200 pixel tall block of the body of the table to be
shown, along with a vertical scrollbar on the right side! For some
reason, Firefox decided to show only 387 pixels (as shown by the DOM
inspector) horizontally, and gave me a horizontal scroll bar as well!
I assume that I could explicitly specify a width in the style
attribute to control this tendency.

Submitting the same page to IE showed a very bizarre result: IE made
EACH ROW in the body 200 pixels tall! And MS now says they will update
IE only for new operating system releases. AAAUUUGGGG!!!


A bit more: Firefox seems to add the horizontal bar to compensate for
the horizontal space lost to the vertical scroll bar. I'd call that a
bug. Interestingly, Netscape 7.02 displays this table perfectly.

--
Tim Slattery
Sl********@bls.gov
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Emil Dotchevski | last post by:
I have a table that is at 100% width, which contains a <TD> that is 80% of that. In the <TD> I want to put pre-formatted text (the output from a C++ compiler, to be more precise) and I'd like the...
4
by: Bill Sonia | last post by:
It seems whenever I set a DataGrid.DataSource = DataTable (vb.net) to populate a datagrid, the scroll bars on the datagrid default to disabled. And the only way I can get them to enable is to...
4
by: justdummy | last post by:
Hi, I am struggling with a problem for sometimes. I need to display a table in a html and if the height of the table goes beyond 200 px then a vertical scrollbar should alone appear without any...
1
by: Jeremy Chapman | last post by:
I've got a grid inside a div so that it's got scroll bars around it. What I want to do is have the header row fixed at the top, so that the vertical scroll bars scroll just the data rows of the...
69
by: RC | last post by:
I know how to do this in JavaScript by window.open("newFile.html", "newTarget", "scrollbars=no,resizable=0,width=200,height=200"); The browser will open a new window size 200x200, not allow...
1
by: amuven | last post by:
Hi All, I need to put a horizontal scroll bar for 4 cells alone where my first cell in table should not contain any horizontal scroll bar . In clear, let us say there are 5 columns in my...
1
by: crazy works | last post by:
hello guys, i have problem in the scroll bar on my css code , i am trying to use that css menu from that link http://www.cssplay.co.uk/menus/slide_fly.html it actually works very good but i want...
3
by: PrabodhanP | last post by:
I have CSS based mouseover scrolling for divContent embeded in my webpage.It works fine in IE,but not working in mozilla-FF. It is located at the location.....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.