Synchronize Scrolling of Two Multiline TextBoxes using jQuery

Posted by: Suprotim Agarwal , on 11/28/2009, in Category jQuery and ASP.NET
Views: 34225
Abstract: This short article demonstrates how to synchronize scrolling of two ASP.NET Multiline TextBoxes using jQuery
Synchronize Scrolling of Two Multiline TextBoxes using jQuery
 
This short article demonstrates how to synchronize scrolling of two ASP.NET Multiline TextBoxes using jQuery. This article is a sample chapter from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls. 

Note that for demonstration purposes, I have included jQuery code in the same page. Ideally, these resources should be created in separate folders for maintainability.

Let us quickly jump to the solution and see how we can synchronize scrolling of two ASP.NET MultilineTextBoxes by using minimum client-side code

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Sync two Multiline TextBoxes</title>
    <script language="javascript" type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
   
    <script type="text/javascript">
        $(function() {
            var $tb1 = $('textarea[id$=tb1]');
            var $tb2 = $('textarea[id$=tb2]');
            $tb1.scroll(function() {
                $tb2.scrollTop($tb1.scrollTop());
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="bigDiv">
        <h2>Click and scroll in the left textbox to see the
        synchronized scroll in right textbox</h2><br /><br />
        <asp:TextBox ID="tb1" runat="server" TextMode="MultiLine"
        Text="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
        Tooltip="Click on scrollbar to see the scroll on right box"
        Rows="5"/>
        <asp:TextBox ID="tb2" runat="server" TextMode="MultiLine"
        Text="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
        Rows="5"/>
        <br /><br />
        Tip: Scrolling the right textbox does not affect the left one.
    </div>
    </form>
</body>
</html>
The technique shown above synchronizes the scrolling of TextBox (tb2) with TextBox (tb1). As the user scrolls through the contents of tb1, tb2 automatically scrolls to keep up with the display of tb1.
$tb1.scroll(function() {
      $tb2.scrollTop($tb1.scrollTop());
});
As shown in the screenshot below, after scrolling 4 lines of the first textbox, the second textbox scrolls automatically to keep up with the first textbox scrolling:
Sync Scroll Text Area
This example is well suited for a requirement when two versions of the same document are to be compared with each other and the user need not have to explicitly scroll through both the versions to compare them.
Note: The code works when the user scrolls using the keyboard or mouse and has been tested on IE 7, IE 8, Firefox 3, Chrome 2, Safari 4 browsers
You can see a Live Demo over here.
I hope you found this article useful and I thank you for viewing it. This article was taken from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls which contains similar recipes that you can use in your applications.
 If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
jQuery 3 - New Features and Performance Improvements

HTML Table and jQuery – Handy Code Snippets

jQuery Event Handling Basics - Difference between Bind, Live, Delegate and On

Select / Deselect All CheckBoxes using jQuery

jQuery UI DatePicker - Tips and Tricks

jQuery TreeView with Expand Collapse Icons

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim received the prestigious Microsoft MVP award for 17 consecutive years, until he resigned from the program in 2025. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement by Copyscape



Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by wyvern on Sunday, November 29, 2009 12:03 PM
very useful
Comment posted by wyvern on Sunday, November 29, 2009 12:04 PM
actually should be : $(function() {
            var $tb1 = $('textarea[id$=tb1]');
            var $tb2 = $('textarea[id$=tb2]');
            $tb1.scroll(function() {
                $tb2.scrollTop($tb1.scrollTop());
            });
$tb2.scroll(function() {
                $tb1.scrollTop($tb2.scrollTop());
            });
Comment posted by Sangam Uprety on Monday, November 30, 2009 2:17 AM
Agreed with @wyvern. With the added part, now both the textares will have same scrolling whether we get hold of scrollbar in textarea1 or textarea2.

Very thanks to Suprotim. I expected to see onscroll or equivalent event for textarea after I read this tips. There seems to be none. But look at this jquery snippet, awsome!
$(this).siblings('.current').removeClass('current'); $(this).addClass('current'); $('.tabContent').children('.current').removeClass('current'); $('.tabContent').children().eq($(this).index()).addClass('current'); }); });