scroll a table

Discussion in 'Javascript' started by veronique rossi, Jun 2, 2004.

  1. 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
    veronique rossi, Jun 2, 2004
    #1
    1. Advertising

  2. 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>
    veronique rossi, Jun 8, 2004
    #2
    1. Advertising

  3. veronique rossi

    kaeli Guest

    kaeli, Jun 8, 2004
    #3
  4. veronique rossi

    Tim Slattery Guest

    kaeli <> wrote:

    >In article <>,
    > 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
    Tim Slattery, Jun 8, 2004
    #4
  5. Tim Slattery <> writes:

    > kaeli <> wrote:
    >
    >>In article <>,
    >> 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 -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jun 8, 2004
    #5
  6. veronique rossi

    kaeli Guest

    In article <>,
    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
    kaeli, Jun 8, 2004
    #6
  7. veronique rossi

    Tim Slattery Guest

    kaeli <> wrote:

    >In article <>,
    > 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
    Tim Slattery, Jun 10, 2004
    #7
  8. veronique rossi

    Tim Slattery Guest

    Tim Slattery <> wrote:

    >kaeli <> wrote:
    >
    >>In article <>,
    >> 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
    Tim Slattery, Jun 10, 2004
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. nicholas
    Replies:
    0
    Views:
    422
    nicholas
    Dec 7, 2004
  2. Kevin
    Replies:
    1
    Views:
    9,490
    Roland
    Feb 5, 2005
  3. Sathiamoorthy

    Enable Scroll up and scroll down in CR-report

    Sathiamoorthy, Nov 9, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    868
    zobalee
    Nov 28, 2006
  4. UJ
    Replies:
    1
    Views:
    549
    John Timney \(MVP\)
    Nov 1, 2006
  5. =?Utf-8?B?Ui5OaWprYW1w?=

    Listbox disabled - cant scroll in IE - can scroll in Firefox

    =?Utf-8?B?Ui5OaWprYW1w?=, Nov 22, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    1,207
    =?Utf-8?B?Ui5OaWprYW1w?=
    Nov 22, 2006
Loading...

Share This Page