Scrolling textareas in sync with Firefox

Discussion in 'Javascript' started by Mark, Mar 3, 2005.

  1. Mark

    Mark Guest

    How do I scroll two textareas in sync with FireFox/Mozilla? The IE
    solution has been posted before by Martin Honnen.
     
    Mark, Mar 3, 2005
    #1
    1. Advertising

  2. Mark

    Mark Guest

    Mark wrote:
    > How do I scroll two textareas in sync with FireFox/Mozilla? The IE
    > solution has been posted before by Martin Honnen.


    No one has answered and a bit more searching seems to say that a bug
    prevents the textarea onscroll event from firing in past or current
    versions of Mozilla or Firefox.

    The following code/hack seems to work in Firefox 1.01 on Win2k. It
    aligns a appropriately sized DIV with scrollbars so it completely
    covers the scrollbars of the lower textarea. This DIV's scrollbar is
    used to synchronously scroll both upper and lower textareas.

    Has anyone got some other/better work arounds?

    <html>
    <head>
    <script>
    </script>
    </head>
    <body>
    <textarea id="ta1" rows=5 cols=80>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20</textarea>
    <textarea id="ta2" rows=5 cols=80>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20</textarea>
    <div onscroll="if (document.getElementById) {
    document.getElementById('ta1').scrollTop = this.scrollTop;
    document.getElementById('ta2').scrollTop = this.scrollTop;
    }"
    style="position: absolute; top: 113; left:654; height: 96px; width:
    16px; overflow: auto;">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    </body>
    </html>
     
    Mark, Mar 5, 2005
    #2
    1. Advertising

  3. Mark

    rh Guest

    Mark wrote:
    > Mark wrote:
    > > How do I scroll two textareas in sync with FireFox/Mozilla? The IE
    > > solution has been posted before by Martin Honnen.

    >
    > No one has answered and a bit more searching seems to say that a bug
    > prevents the textarea onscroll event from firing in past or current
    > versions of Mozilla or Firefox.
    >
    > The following code/hack seems to work in Firefox 1.01 on Win2k. It
    > aligns a appropriately sized DIV with scrollbars so it completely
    > covers the scrollbars of the lower textarea. This DIV's scrollbar is
    > used to synchronously scroll both upper and lower textareas.
    >
    > Has anyone got some other/better work arounds?
    >


    It's not at all clear why you would want to do this, but presumably
    this would only make sense if the content of the textareas is
    equivalenced and synchronized as well.

    An alternative, for FF and Netscape, would be to sync on
    mouseup/mousemove (and keyup) events in the textarea elements, as it
    seems mouse events are delivered when mouse activation is initiated
    within the scroll bar areas.

    This won't work for Mozilla, as it doesn't appear to deliver updated
    scrollTop/Left values for the textareas.

    ../rh
     
    rh, Mar 5, 2005
    #3
  4. Mark <> wrote in message
    news:...
    > How do I scroll two textareas in sync with FireFox/Mozilla? The IE
    > solution has been posted before by Martin Honnen.
    >


    If this type of event isn't available, you can use simulate it using
    periodic monitoring. The following example demonstrates the principle and
    works in I.E. and Mozilla but not Opera. Under I.E. it works more smoothly
    if the function is called also by the onscroll event:

    <textarea id='ta1'onscroll="scrollTa()) ...... >

    and you can experiment with shorter timeout the delays.

    You don't say whether you want master/slave or dual master scrolling,
    however if you want master/slave, remove the redundant code.

    <script type='text/javascript'>

    var ref1=document.getElementById('ta1'),
    ref2=document.getElementById('ta2');
    var vPos1=ref1.scrollTop,vPos2=ref2.scrollTop;

    function scrollTa()
    {
    if(ref1.scrollTop!=vPos1)
    vPos1=ref2.scrollTop=ref1.scrollTop;
    else
    if(ref2.scrollTop!=vPos2)
    vPos2=ref1.scrollTop=ref2.scrollTop;

    setTimeout('scrollTa()',250)
    }

    window.onload=scrollTa;

    </script>


    --
    S.C. http://makeashorterlink.com/?H3E82245A
     
    Stephen Chalmers, Mar 5, 2005
    #4
  5. Mark

    Mark Szlazak Guest

    rh wrote:
    > It's not at all clear why you would want to do this, but presumably
    > this would only make sense if the content of the textareas is
    > equivalenced and synchronized as well.


    Yes that's exactly it. Data values are transform into others and it is
    very convenient to sync data pairs.

    > An alternative, for FF and Netscape, would be to sync on
    > mouseup/mousemove (and keyup) events in the textarea elements, as it
    > seems mouse events are delivered when mouse activation is initiated
    > within the scroll bar areas.
    >
    > This won't work for Mozilla, as it doesn't appear to deliver updated
    > scrollTop/Left values for the textareas.
    >
    > ../rh


    I haven't tried my posted solution in Mozilla but any solution should
    work their as well.

    Thanks for your suggestions.

    Mark.
     
    Mark Szlazak, Mar 5, 2005
    #5
  6. Mark

    Mark Szlazak Guest

    Thanks, I'll check this one out as well.

    Cheers. Mark.
     
    Mark Szlazak, Mar 5, 2005
    #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. MacEgan
    Replies:
    2
    Views:
    370
    Andrew Thompson
    Dec 17, 2005
  2. Trans
    Replies:
    2
    Views:
    509
    Trans
    Dec 12, 2005
  3. Kai Grossjohann

    Sync scrolling of divs (not frames)

    Kai Grossjohann, Nov 12, 2003, in forum: Javascript
    Replies:
    5
    Views:
    248
    Thomas 'PointedEars' Lahn
    Nov 23, 2003
  4. stuart

    Scrolling Multiple Textarea in sync

    stuart, Jul 14, 2004, in forum: Javascript
    Replies:
    6
    Views:
    140
    Stuart Cochrane
    Jul 22, 2004
  5. Mark Szlazak
    Replies:
    6
    Views:
    163
    Csaba Gabor
    Mar 14, 2005
Loading...

Share This Page