Sync scrolling of divs (not frames)

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Kai Grossjohann
    #1

    Sync scrolling of divs (not frames)

    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>Testin g div scrolling</title>
    <script language="JavaS cript">
    <!-- // Begins
    var topdiv;
    var bottomdiv;
    IE = (document.all) ? true : false;
    last_x = 0;
    last_y = 0;
    function synchronizeScro ll() {
    if (bottomdiv.scro llLeft) {
    topdiv.scrollLe ft = bottomdiv.scrol lLeft;
    }
    }
    // Ends -->
    </script>

    </head>
    <body onScroll="synch ronizeScroll()"
    onLoad="if (!IE) window.setInter val('synchroniz eScroll()',
    100);">

    <div id="topdiv" style="width:20 0px;overflow:au to">
    <pre>123456789| 123456789|12345 6789|123456789| 123456789|12345 6789|123456789| </pre></div>
    <hr>
    <div onScroll="synch ronizeScroll()"
    id="bottomdiv" style="width:20 0px;height:100p x;overflow:scro ll">
    <pre>
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
    </pre>
    </div>
    <script language="JavaS cript">
    topdiv = document.getEle mentById('topdi v');
    bottomdiv = document.getEle mentById('botto mdiv');
    </script>
    </body>
    </html>
    Tags: None
    • Kai Grossjohann
      #2
      Re: Sync scrolling of divs (not frames)

      Kai.Grossjohann @gmx.net (Kai Grossjohann) wrote in message news:<e808b168. 0311120527.1f72 5fcb@posting.go ogle.com>...[color=blue]
      >
      > 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?[/color]

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

      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.M ozAppearance == "") {
      // We seem to be running in Mozilla, so let's frob the overflow
      attribute.
      topdiv.style.ov erflow = '-moz-scrollbars-none';
      }

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

      Cheers,
      Kai

        Comment

        • Thomas 'PointedEars' Lahn
          #3
          Re: Sync scrolling of divs (not frames)

          Kai Grossjohann wrote:
          [color=blue]
          > It turns out that overflow:-moz-scrollbars-none works in Mozilla: the
          > scrollbars are hidden, yet I can scroll programmaticall y.
          >
          > 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.M ozAppearance == "") {
          > // We seem to be running in Mozilla, so let's frob the overflow
          > attribute.
          > topdiv.style.ov erflow = '-moz-scrollbars-none';
          > }
          >
          > I'm not sure about the test that finds out if we are running Mozilla.[/color]

          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.Mo zAppearance != "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

            Comment

            • Kai Grossjohann
              #4
              Re: Sync scrolling of divs (not frames)

              Thomas 'PointedEars' Lahn <PointedEars@we b.de> writes:
              [color=blue]
              > Have you ever thought of users without client-side JavaScript support?[/color]

              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

                Comment

                • Kai Grossjohann
                  #5
                  Re: Sync scrolling of divs (not frames)

                  Thomas 'PointedEars' Lahn <PointedEars@we b.de> writes:
                  [color=blue]
                  > 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.Mo zAppearance != "undefined" )
                  > {
                  > ...
                  > }[/color]

                  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.
                  [color=blue]
                  > The same goes for your `IE' boolean variable. See
                  > http://pointedears.de.vu/scripts/test/whatami for details.[/color]

                  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.
                  [color=blue]
                  > And please use http://validator.w3.org/, your HTML is far from valid.[/color]

                  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

                    Comment

                    • Thomas 'PointedEars' Lahn
                      #6
                      Re: Sync scrolling of divs (not frames)

                      Kai Grossjohann wrote:
                      [color=blue]
                      > Thomas 'PointedEars' Lahn [...] writes:[color=green]
                      >> And please use http://validator.w3.org/, your HTML is far from valid.[/color]
                      >
                      > OK. I guess there is also a command-line version, I've been wanting
                      > to have this for quite a while now.[/color]

                      Source Code Availability for The W3C Markup Validation Service
                      http://validator.w3.org/source/
                      W3C's easy-to-use markup validation service, based on SGML and XML parsers.

                      Clean up your Web pages with HTML TIDY
                      http://www.w3.org/People/Raggett/tidy/
                      HTML, validation, error correction, pretty-printing

                      [color=blue]
                      > Maybe even somebody has something for Eclipse...[/color]

                      PHPeclipse - PHP Eclipse-Plugin - Browse Files at SourceForge.net
                      http://sourceforge.net/project/showfiles.php?group_id=57621&release_id=194394
                      PHP - Support for the Eclipse IDE Framework ( www.eclipse.org ). Some Features are PHP parser, debugger, code formatter, outline view,…



                      HTH

                      PointedEars

                        Comment

                        Previous template Next
                        Working...