469,648 Members | 1,362 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,648 developers. It's quick & easy.

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 1755
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 discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Emil Dotchevski | last post: by
4 posts views Thread by Bill Sonia | last post: by
4 posts views Thread by justdummy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.