By 06/02/2014 11 Comments

How To AutoScroll a Multiline ASP.NET TextBox using jQuery

Auto scroll a Text area in asp.net

  • When the user clicks on the button (TT_Scrollbutton), we toggle the click behavior. On the first click, we cancel the postback by using e.preventDefault() and then call a function called scrollArea() passing in the textarea and the scrollHeight.

Following is an example of auto scroll a textBox 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 $txtbox = $('[id$="TT_TextBox1"]'); // get TT_TextBox1 (textArea) and assign into txtbox variable

            $('[id$="TT_Scrollbutton"]').toggle(
            function (e) { // trigger toggle() event by passing a functio with e parameter
                e.preventDefault(); // prevent post back to server
                scrollArea($txtbox, $txtbox[0].scrollHeight); // call method scrollArea(), pass 2 arguments inside it, first is a textArea object, second textArea line index which calls scrollHeight property
            },
            function (e) { // call function by passing e as an argument
                e.preventDefault(); scrollArea($txtbox, 0); // call method scrollArea(), pass 2 argument textArea object and 0 index

            });

        });

        function scrollArea(ctrl, ht) { // function declaration with 2 parameters, first control name (textArea), second ht (scroll height)
            ctrl.animate({ scrollTop: ht }, 1000); // call animate function with 2 parameter, scroll property and animation time (milliseconds)
        }

    </script>

ASP.NET Code snippet

<!--- following code renders a textArea, label and a button control on browser --->

<asp:Label runat="server" Text="Scroll the box contents by clicking on the Button"></asp:Label>
        <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" />
        <br /><br />
        <asp:Button ID="TT_Scrollbutton" runat="server" Text="Scroll"/>






Posted in: ASP.NET, jQuery

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .