Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: synchronized textarea scrollbars

  1. #1
    Join Date
    Aug 2006
    Location
    Dartmouth, NS, CANADA
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool synchronized textarea scrollbars

    Hi Folks,

    I saw a script a while back which allowed you to synchronize the position of the scrollbars between two textareas. Both textareas contained the same number of lines, containing two related lists, so it was very nice to be able to scroll one and have the second keep the alignment between the two.

    Anyone know where this script might be? Ok, that's a long shot, but if not, how would you go about starting to write something like that? I hate having to reinvent the wheel, but I can't find this one in my script library...

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    I think this is what you're talking about.

    When you scroll the first div, it scrolls the second, and vice-versa.

    Code:
    <html>
    <head>
    <style type="text/css">
    .content {
    height:100px;
    width:150px;
    overflow-y:scroll;
    padding:2px;
    border:1px solid black;
    float:left
    }
    </style>
    </head>
    <body>
    <div class="content" id="first" onscroll="second.scrollTop=scrollTop">
    Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    </div>
    <div class="content" id="second" onscroll="first.scrollTop=scrollTop">
    Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    <br>Line
    </div>
    </body>
    </html>
    - Mike

  3. #3
    Join Date
    Aug 2006
    Location
    Dartmouth, NS, CANADA
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Yep, that's the behavior exactly. However, I need to apply it to textareas so the user can modify the lists.

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Simple: Just remove any html within the divinsion and rename the <div> tags to <textarea>

    Look here:
    Code:
    <html>
    <head>
    <style type="text/css">
    .content {
    height:100px;
    width:150px;
    overflow-y:scroll;
    padding:2px;
    border:1px solid black;
    float:left
    }
    </style>
    </head>
    <body>
    <textarea class="content" id="first" onscroll="second.scrollTop=scrollTop">
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    </textarea>
    <textarea class="content" id="second" onscroll="first.scrollTop=scrollTop">
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    Line
    </textarea>
    </body>
    </html>
    - Mike

  5. #5
    Join Date
    Aug 2006
    Location
    Dartmouth, NS, CANADA
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yeah, seeing your first answer, that's exactly what I tried. Works in IE after "allowing blocked content", and not in FireFox at all. Too bad. The div version works in both without warnings...

    Thanks for the idea though. I may still use it and just tell my client to use IE and enable active content on that page...

  6. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Or!! (insert dramatic music here)

    add this to the div tags:

    Code:
    ...<div contenteditable>
    It makes the divinsions editable
    - Mike

  7. #7
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here, this must work in firefox not sure about IE, test it though.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function scrolltheother(){
    var farea = document.testform.testarea;
    var sarea = document.testform.stestarea;
    sarea.scrollTop = farea.scrollTop;
    setTimeout("scrolltheother()",10);
    }
    window.onload = scrolltheother;
    </script>
    </head>
    <body>
    <form name="testform">
    <textarea cols="30" rows="10" id="fArea" name="testarea" onscroll="scrolltheother()">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce luctus turpis. Proin a lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed non purus in tellus semper porta. Praesent vel quam nec orci mollis dignissim. Nulla ultrices, tellus quis semper pretium, eros augue eleifend risus, at dictum massa urna blandit metus. Nullam libero metus, scelerisque in, sollicitudin in, tristique nec, tortor. Sed eu felis. Integer rutrum mauris id nisl. Praesent cursus. Vivamus faucibus.
    
    Suspendisse erat enim, interdum et, semper quis, luctus ut, tortor. Sed sodales. Cras lacus. Quisque laoreet, orci ac imperdiet congue, quam odio malesuada magna, eu vulputate diam sapien vitae magna. Maecenas dictum imperdiet nulla. Sed interdum ipsum a massa. Quisque dictum. Sed pede nibh, nonummy sed, imperdiet et, ullamcorper ac, neque. Maecenas sollicitudin lacinia neque. Nunc neque quam, cursus ut, lacinia vitae, luctus eget, lacus. Proin vestibulum augue eu pede. Maecenas eu sapien. Vivamus quis ipsum nec nunc cursus accumsan.
    
    Sed ac lectus ac metus pulvinar vehicula. Donec ut tortor. Donec pulvinar velit in quam posuere sollicitudin. Nullam laoreet mi. Sed nonummy, augue sit amet hendrerit placerat, mauris orci condimentum risus, placerat fermentum tellus turpis a velit. In hac habitasse platea dictumst. Nullam gravida, tortor vel tempor euismod, risus massa iaculis nulla, sagittis tincidunt sem justo quis quam. Nulla metus augue, ornare eget, sagittis ac, commodo quis, ipsum. Donec non sem iaculis tellus interdum hendrerit. Curabitur velit augue, ultrices id, vehicula sed, pulvinar eu, est. Vestibulum nonummy varius dolor. Aenean vel lacus eget sem suscipit bibendum. Aliquam facilisis, orci id sodales consequat, nisl tortor egestas justo, eget venenatis dui massa sit amet dolor. Cras dui odio, sodales id, ullamcorper sed, molestie vitae, turpis.
    
    Sed ipsum quam, vehicula quis, iaculis nec, tempus at, enim. Cras ac nisl id nunc bibendum scelerisque. Vestibulum interdum, enim non feugiat pulvinar, metus urna aliquam tortor, adipiscing bibendum nibh nisi sed metus. Pellentesque pede. Sed dolor. Nullam a ipsum. Quisque quis tellus. Sed tortor leo, porta id, sagittis ac, tristique sit amet, mi. Fusce ornare urna id ipsum. Pellentesque sit amet risus. Morbi ut augue. Mauris sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed a odio. Etiam dignissim, diam in rutrum condimentum, massa lorem placerat dolor, id placerat nisl nisl dignissim lorem. Donec placerat est eget neque.
    
    Ut tincidunt, magna non tincidunt iaculis, odio eros dapibus ipsum, quis mollis erat pede eu libero. Mauris vulputate ipsum non erat. Quisque egestas felis eu metus. Suspendisse turpis. Donec purus neque, sagittis a, rutrum eu, sodales vel, tellus. Praesent dignissim, mi sed interdum sodales, orci diam ultricies lorem, nec imperdiet orci ante eget dui. Integer rutrum augue at urna. Praesent pellentesque. Praesent hendrerit bibendum ipsum. Suspendisse pede sapien, scelerisque ac, rutrum vel, pellentesque quis, nunc. Ut velit. Vestibulum condimentum neque eget nisl. Nulla sodales aliquet orci. Morbi fermentum. Maecenas facilisis ante interdum odio. Proin aliquam semper magna. Praesent tristique diam ut leo. Morbi tristique quam quis ante. Cras ultricies. Donec tortor.
    </textarea>
    <textarea cols="30" rows="10" id="sArea" name="stestarea">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce luctus turpis. Proin a lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed non purus in tellus semper porta. Praesent vel quam nec orci mollis dignissim. Nulla ultrices, tellus quis semper pretium, eros augue eleifend risus, at dictum massa urna blandit metus. Nullam libero metus, scelerisque in, sollicitudin in, tristique nec, tortor. Sed eu felis. Integer rutrum mauris id nisl. Praesent cursus. Vivamus faucibus.
    
    Suspendisse erat enim, interdum et, semper quis, luctus ut, tortor. Sed sodales. Cras lacus. Quisque laoreet, orci ac imperdiet congue, quam odio malesuada magna, eu vulputate diam sapien vitae magna. Maecenas dictum imperdiet nulla. Sed interdum ipsum a massa. Quisque dictum. Sed pede nibh, nonummy sed, imperdiet et, ullamcorper ac, neque. Maecenas sollicitudin lacinia neque. Nunc neque quam, cursus ut, lacinia vitae, luctus eget, lacus. Proin vestibulum augue eu pede. Maecenas eu sapien. Vivamus quis ipsum nec nunc cursus accumsan.
    
    Sed ac lectus ac metus pulvinar vehicula. Donec ut tortor. Donec pulvinar velit in quam posuere sollicitudin. Nullam laoreet mi. Sed nonummy, augue sit amet hendrerit placerat, mauris orci condimentum risus, placerat fermentum tellus turpis a velit. In hac habitasse platea dictumst. Nullam gravida, tortor vel tempor euismod, risus massa iaculis nulla, sagittis tincidunt sem justo quis quam. Nulla metus augue, ornare eget, sagittis ac, commodo quis, ipsum. Donec non sem iaculis tellus interdum hendrerit. Curabitur velit augue, ultrices id, vehicula sed, pulvinar eu, est. Vestibulum nonummy varius dolor. Aenean vel lacus eget sem suscipit bibendum. Aliquam facilisis, orci id sodales consequat, nisl tortor egestas justo, eget venenatis dui massa sit amet dolor. Cras dui odio, sodales id, ullamcorper sed, molestie vitae, turpis.
    
    Sed ipsum quam, vehicula quis, iaculis nec, tempus at, enim. Cras ac nisl id nunc bibendum scelerisque. Vestibulum interdum, enim non feugiat pulvinar, metus urna aliquam tortor, adipiscing bibendum nibh nisi sed metus. Pellentesque pede. Sed dolor. Nullam a ipsum. Quisque quis tellus. Sed tortor leo, porta id, sagittis ac, tristique sit amet, mi. Fusce ornare urna id ipsum. Pellentesque sit amet risus. Morbi ut augue. Mauris sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed a odio. Etiam dignissim, diam in rutrum condimentum, massa lorem placerat dolor, id placerat nisl nisl dignissim lorem. Donec placerat est eget neque.
    
    Ut tincidunt, magna non tincidunt iaculis, odio eros dapibus ipsum, quis mollis erat pede eu libero. Mauris vulputate ipsum non erat. Quisque egestas felis eu metus. Suspendisse turpis. Donec purus neque, sagittis a, rutrum eu, sodales vel, tellus. Praesent dignissim, mi sed interdum sodales, orci diam ultricies lorem, nec imperdiet orci ante eget dui. Integer rutrum augue at urna. Praesent pellentesque. Praesent hendrerit bibendum ipsum. Suspendisse pede sapien, scelerisque ac, rutrum vel, pellentesque quis, nunc. Ut velit. Vestibulum condimentum neque eget nisl. Nulla sodales aliquet orci. Morbi fermentum. Maecenas facilisis ante interdum odio. Proin aliquam semper magna. Praesent tristique diam ut leo. Morbi tristique quam quis ante. Cras ultricies. Donec tortor.
    </textarea>
    </body>
    </html>

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Mozilla's lack of wide support for the onscroll event and Opera's lack of wide support for the scrollTop property make this unlikely to ever be well implemented cross browser very well. The method mburt uses is IE only from the beginning, due to its reliance upon the assumed document.all object which is not supported even in other browsers that support the literal document.all object. It also suffers from excessive styling of the textareas, which renders them unusable in many ways in Opera. Even converted to getElementByID, it lacks portability in that onscroll for textarea is not widely supported. The method used by shachi doesn't even work in FF, as the second area becomes crippled when scrolled (this part could probably be worked out). It also relies on polling, not the best idea, if it can be avoided. I've come up with a method that works well in IE, fairly well in FF (mousewheel scrolling support is jumpy) and not at all in Opera (no support for this use of the scrollTop property for textarea):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Sync Scroll - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function syncScroll(el){
    if (el.id=='first')
    document.getElementById('second').scrollTop=el.scrollTop;
    else
    document.getElementById('first').scrollTop=el.scrollTop
    }
    var syncEm=new Function("if(this.filters)this.blur();syncScroll(this)");
    onload=function(){
    var ids=['first', 'second'];
    for (var i_tem = 0; i_tem < ids.length; i_tem++){
    var theS=document.getElementById(ids[i_tem])
    if (!document.body.filters)
    theS.onmousedown=theS.onmouseup=theS.onmousemove=theS.onscroll=theS.onkeyup=syncEm;
    else
    theS.onscroll=syncEm;
    }
    }
    </script>
    </head>
    <body>
    <textarea rows="6" class="content" id="first">
    Line1
    Line2
    Line3
    Line4
    Line5
    Line6
    Line7
    Line8
    Line9
    Line10
    Line11
    Line12
    Line13
    Line14
    Line15
    Line16
    </textarea>
    <textarea rows="6" class="content" id="second">
    Line1
    Line2
    Line3
    Line4
    Line5
    Line6
    Line7
    Line8
    Line9
    Line10
    Line11
    Line12
    Line13
    Line14
    Line15
    Line16
    </textarea>
    </body>
    </html>
    Notes: I'm not happy about needing to assign so many events in Mozilla to overcome its scanty support for the onscroll event, there may be a better way.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    jscheuer1: my code does work but the only problem is that the first textarea doesn't get scrolled when the second textarea is scrolled. I was trying to fix it but don't know how.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by shachi
    jscheuer1: my code does work but the only problem is that the first textarea doesn't get scrolled when the second textarea is scrolled. I was trying to fix it but don't know how.
    Well, I did say that part could probably be worked out. However, what it did for me was that the second area couldn't seem to be scrolled without jumping back to the top. What is needed is a way of doing one thing for one area and the reverse for the other, not the same thing for both of them. If you examine my code you will see a test for which area is initiating the movement. In mburt's model, he has two separate events for each area. This is the most rudimentary (and often the best) way of ensuring that one item does one thing and the other the reverse.

    I'm not really thrilled with any of the methods, including my own, as there is no support in Opera for it. I've looked around a bit to find some hooks Opera could use to accomplish this but, so far have come up empty. Which reminds me, my method should have a few object tests included to at least spare browsers like Opera from trying to execute code that they cannot.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •