Hot File

Synchronize Scrolling of Two Multiline ASP.NET TextBoxes using jQuery

View: 112    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: ASP.NET Framework   Fields: Other

0 point/1 review File has been tested

For instance, there are two textareas on a webpage one is right side and second is left side, when a user scroll down of a textarea which is left side, than also scroll down of right side textarea automatically and vice versa that is called synchronize scrolling.

Introduction

What is synchronize scrolling ?

For instance, there are two textareas on a webpage one is right side and second is left side, when a user scroll down of a textarea which is left side, than also scroll down of right side textarea automatically and vice versa that is called synchronize scrolling.

It can be easily achieved in asp.net using JQuery

How it works

The technique shown bellow synchronizes the scrolling of TextBox (TT_TextBox2) with TextBox (TT_TextBox1) and vice versa. As the user scrolls through the contents of  TT_TextBox1, TT_TextBox2 automatically scrolls to keep up with the display of  TT_TextBox1 and vice versa.

Following code describes, How synchronize scrolling in asp.net using JQuery

JQuery Code snippet.

<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!-- call jquery file or library into asp.net page --->
    <script>
        $(document).ready(function() { // this is a function which is called by browser when it loads a webpage
 
            var $txtbox1 = $('[id$="TT_TextBox1"]'); // get textBox 1 by an id, assign to variable
            var $txtbox2 = $('[id$="TT_TextBox2"]'); // get textBox2 by an id, assign to variable
            $txtbox1.scroll(function () { // trigger scroll() event when user scrolls textbox 1
                $txtbox2.scrollTop($txtbox1.scrollTop()); // call scrollTop() function by textBox2, pass another scrollTop() function for textBox1
            });
 
            $txtbox2.scroll(function () {  // trigger scroll() event when user scrolls textbox 2
                $txtbox1.scrollTop($txtbox2.scrollTop()); // call scrollTop() function by textBox1, pass another scrollTop() function for textBox2
            });
        });
 
    </script>

ASP.NET Code snippet.

<!--- Following code renders 2 textareas and a label control on browser --->
 
<asp:Label runat="server" Text="Click and scroll in the left textbox to see the synchronized scroll in right textbox and vice versa"></asp:Label>
        <br/> <br/>
        <asp:TextBox ID="TT_TextBox1" runat="server" Rows="5" TextMode="MultiLine"
            Text="TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com" />
 
        <asp:TextBox ID="TT_TextBox2" runat="server" Rows="5" TextMode="MultiLine"
            Text="TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com" />

 

 

Synchronize Scrolling of Two Multiline ASP.NET TextBoxes using jQuery

Synchronize Scrolling of Two Multiline ASP.NET TextBoxes using jQuery Posted on 05-09-2016  For instance, there are two textareas on a webpage one is right side and second is left side, when a user scroll down of a textarea which is left side, than also scroll down of right side textarea automatically and vice versa that is called synchronize scrolling. 5/10 112

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd