Sync scrolling of divs (not frames)

Discussion in 'Javascript' started by Kai Grossjohann, Nov 12, 2003.

  1. I'm trying to synchronize the scrolling of two <div> elements. The
    top element is for showing column headers, the bottom div shows the
    table rows.

    I consed up the following HTML/JavaScript concoction which does
    something useful in IE and also in Mozilla 1.4.

    However, the problem is that it only works in Mozilla if I say
    overflow:auto in the top frame, it ceases working if I say
    overflow:hidden. But saying overflow:hidden is desirable because it
    eliminates a superfluous scrollbar. overflow:hidden works in IE.

    Any suggestions on getting rid of the scrollbars in Mozilla, too?

    tia,
    Kai

    <html>
    <head>
    <title>Testing div scrolling</title>
    <script language="JavaScript">
    <!-- // Begins
    var topdiv;
    var bottomdiv;
    IE = (document.all) ? true : false;
    last_x = 0;
    last_y = 0;
    function synchronizeScroll() {
    if (bottomdiv.scrollLeft) {
    topdiv.scrollLeft = bottomdiv.scrollLeft;
    }
    }
    // Ends -->
    </script>

    </head>
    <body onScroll="synchronizeScroll()"
    onLoad="if (!IE) window.setInterval('synchronizeScroll()',
    100);">

    <div id="topdiv" style="width:200px;overflow:auto">
    <pre>123456789|123456789|123456789|123456789|123456789|123456789|123456789|</pre></div>
    <hr>
    <div onScroll="synchronizeScroll()"
    id="bottomdiv" style="width:200px;height:100px;overflow:scroll">
    <pre>
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    </pre>
    </div>
    <script language="JavaScript">
    topdiv = document.getElementById('topdiv');
    bottomdiv = document.getElementById('bottomdiv');
    </script>
    </body>
    </html>
    Kai Grossjohann, Nov 12, 2003
    #1
    1. Advertising

  2. (Kai Grossjohann) wrote in message news:<>...
    >
    > However, the problem is that it only works in Mozilla if I say
    > overflow:auto in the top frame, it ceases working if I say
    > overflow:hidden. But saying overflow:hidden is desirable because it
    > eliminates a superfluous scrollbar. overflow:hidden works in IE.
    >
    > Any suggestions on getting rid of the scrollbars in Mozilla, too?


    It turns out that overflow:-moz-scrollbars-none works in Mozilla: the
    scrollbars are hidden, yet I can scroll programmatically.

    So now I have this horrible piece of JavaScript which frobs the DOM to
    change the overflow attribute if running in Mozilla. Suggestions for
    improvements are most appreciated.

    if (topdiv.style.MozAppearance == "") {
    // We seem to be running in Mozilla, so let's frob the overflow
    attribute.
    topdiv.style.overflow = '-moz-scrollbars-none';
    }

    I'm not sure about the test that finds out if we are running Mozilla.

    Cheers,
    Kai
    Kai Grossjohann, Nov 13, 2003
    #2
    1. Advertising

  3. Kai Grossjohann wrote:

    > It turns out that overflow:-moz-scrollbars-none works in Mozilla: the
    > scrollbars are hidden, yet I can scroll programmatically.
    >
    > So now I have this horrible piece of JavaScript which frobs the DOM to
    > change the overflow attribute if running in Mozilla. Suggestions for
    > improvements are most appreciated.
    >
    > if (topdiv.style.MozAppearance == "") {
    > // We seem to be running in Mozilla, so let's frob the overflow
    > attribute.
    > topdiv.style.overflow = '-moz-scrollbars-none';
    > }
    >
    > I'm not sure about the test that finds out if we are running Mozilla.


    You are testing the wrong thing. Test if the property is available, then
    you can hope for the rest of the `style' property to work as supposed:

    if (typeof topdiv.style != "undefined"
    && typeof topdiv.style.MozAppearance != "undefined")
    {
    ...
    }

    The same goes for your `IE' boolean variable. See
    http://pointedears.de.vu/scripts/test/whatami for details.

    And please use http://validator.w3.org/, your HTML is far from valid.

    Have you ever thought of users without client-side JavaScript support?


    PointedEars
    Thomas 'PointedEars' Lahn, Nov 18, 2003
    #3
  4. Thomas 'PointedEars' Lahn <> writes:

    > Have you ever thought of users without client-side JavaScript support?


    I try not to think of them poor buggers. Makes me feel sad.

    Some day, the result will enter the annals of history as the web app
    that violates all web and accessibility guidelines in existence.

    Please excuse me while I find a rock to hide under,
    Kai
    Kai Grossjohann, Nov 20, 2003
    #4
  5. Thomas 'PointedEars' Lahn <> writes:

    > You are testing the wrong thing. Test if the property is available, then
    > you can hope for the rest of the `style' property to work as supposed:
    >
    > if (typeof topdiv.style != "undefined"
    > && typeof topdiv.style.MozAppearance != "undefined")
    > {
    > ...
    > }


    Ah, right. I see that I was thinking in the right direction. I will
    learn. I've only been doing this JavaScript stuff for two weeks,
    before that time I didn't even know how to spell JavaScript...

    Thanks for teaching me.

    > The same goes for your `IE' boolean variable. See
    > http://pointedears.de.vu/scripts/test/whatami for details.


    Thanks. I copied the IE variable from a tutorial or sample snippet
    somewhere. It was good enough for a quick exploration, but I'll
    replace it, as I learn more.

    > And please use http://validator.w3.org/, your HTML is far from valid.


    OK. I guess there is also a command-line version, I've been wanting
    to have this for quite a while now. Maybe even somebody has something
    for Eclipse...

    Kai
    Kai Grossjohann, Nov 20, 2003
    #5
  6. Thomas 'PointedEars' Lahn, Nov 23, 2003
    #6
    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. Replies:
    0
    Views:
    1,182
  2. Brian Cryer
    Replies:
    10
    Views:
    3,302
    dorayme
    Feb 16, 2007
  3. Trans
    Replies:
    2
    Views:
    464
    Trans
    Dec 12, 2005
  4. stuart

    Scrolling Multiple Textarea in sync

    stuart, Jul 14, 2004, in forum: Javascript
    Replies:
    6
    Views:
    116
    Stuart Cochrane
    Jul 22, 2004
  5. maya
    Replies:
    4
    Views:
    229
Loading...

Share This Page