Scrolling an ASP.NET Multiline Textbox using jQuery

Introduction: In this article we will explore how to create an autoscroll for a multiline textbox using jQuery. Further inside the page we have to take the two aspx controls named as textbox and the other one is the button. In this article we will see that a textbox having multiline text will scroll automatically on clicking the button control. Let see that whenever we will click on the Button the text inside the multiline textbox will scroll downwards and further clicking again on the button it will back to it's position. Whatever we are using inside this article will be described briefly below. The following are the steps which you have to follow to accomplish your task:

Step 1: Firstly we have to create a Web Application.

Go to Visual Studio 2010
Create the Web Application
Click OK.

Step 2: Secondly you have to add a new page to the website

Go to the Solution Explorer
Right Click on the Project name
Select add new item
Add new web page and give it a name
Click OK

Step 3: In this step we have to place both the aspx control named as textbox with multiline and a button control let see from where you have to add these controls which is given below:

Step 4: In this step we are going to see that see from where the js reference will be added to the source page of the default2.aspx page.

Step 5: Now we are going to write the script code which will be inside either on the head section or in the body section it will depend upon you which way you like most to placed it.

Step 6: In this step we have to see that how we will apply jQuery code to the aspx control we will see the HTML code generated by the browser let see the code given below:

Browser Code: In this code you will see that whenever we run the aspx control on the browser it will run the aspx control according their compatibility code which have been write the aspx textbox as a textarea and aspx button as a input type button so according these compatibility of browser we have to write the jQuery code which we will write in the next step 7. The code whioch is given below is the code of browser

<body>
<form method="post" action="Default3.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTkwNjc4NTIwMWRkZgGbSRlPula4D5KoUo+QjPJDgwap+zHLCTWwK27B+8U=" />
</div>

<div class="aspNetHidden">

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwL/zuDdCQKShty0BQKSotaIC0EGc18QfpfF2WoZ9sd5eiLrf72eJQ9UIU8VrZe4+AEc" />
</div>
<div class="smallDiv"
style="background-color: #006666; font-family: 'Comic Sans MS'; font-size: xx-large; color: #FFFFFF;">
<h2 style="font-family: 'Comic Sans MS'; font-size: xx-large; font-weight: normal; color: #800000; background-color: #808080">
Click on Button to Scroll downwards and upwards</h2>
<br /><br />
<textarea name="txt1" rows="5" cols="20" id="txt1" style="width:278px;height:142px;font-size:Large;font-family:Comic Sans MS;color:#660033;border-width:5px;border-style:Groove;border-color:#FFFF66;background-color:#CCFFCC;">
Hi to all Hi to all Hi to all Hi to all
Amit Maheshwari MCN Solutions Mindcracker Network
Hiiiiii Hiiiiiii Hiiiiii Hiiiiiiiiiiiii
Welcome to all Welcome to all Welcome to all
Welcomezzzzzzzz Welcomezzzzzzzzzzz Welcomezzzzzzzz</textarea>
<br />
<input type="submit" name="btn1" value="Scroll" id="btn1" style="color:#993333;background-color:#FFFFCC;border-color:Yellow;border-width:5px;border-style:Groove;font-family:Comic Sans MS;font-size:Large;" />
<br />
Tip: Whenever we click on the button the text will be scrolled both downwards and upwards.
</div>
</form>
</body>

Step 7: In this step we will write the jQuery code which will be inside the <script></script> tag and always placed between Head section or body section it's your choice that where you want to placed it. Let see the jQuery code which is given below:

Explanation:

Here we will explain the jQuery code explanation which is given above, When the user clicks on the button (btn), we toggle the click behavior. On the first click, we cancel the postback by using e.preventDefault() and then call a function called s_roll() passing in the textarea and the scrollHeight. The code $txt[0].scrollHeight is for scrolling downwards.

e.preventDefault();
s_roll($txt, $txt[0].scrollHeight);

further again When the user clicks the button (btn) again, the postback is cancelled and the scrollHeight is set to 0. And by using it the multiline textbox will scrolling upwards.

e.preventDefault();
s_roll($txt, 0);

Here the scrollArea() function accepts the textarea that is to be scrolled as well as the scrollHeight. We then animate the scrollTop property to scroll upwards/downwards depending on the height parameter. The duration of the animation is set to 1000 milliseconds which provides a smooth scrolling effect and you can change according to your requirement. the function is given below which will animate it.

function s_roll(ctrl, ht)
{
ctrl.animate({ scrollTop: ht }, 1000);
}

Step 8: In this step we will write the complete code for the Default2.aspx page. See the code which is given below:

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AutoScroll Multiline TextBox using jQuery</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
var $txt = $('textarea[id$=txt1]');
$('input[id$=btn1]').toggle(
function (e) {
e.preventDefault();
s_roll($txt, $txt[0].scrollHeight);
},
function (e) {
e.preventDefault();
s_roll($txt, 0);
});
});
function s_roll(ctrl, ht) {
ctrl.animate({ scrollTop: ht }, 1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="smallDiv"
style="background-color: #006666; font-family: 'Comic Sans MS'; font-size: xx-large; color: #FFFFFF;">
<h2 style="font-family: 'Comic Sans MS'; font-size: xx-large; font-weight: normal; color: #800000; background-color: #808080">
Click on Button to Scroll downwards and upwards</h2>
<br /><br />
<asp:TextBox ID="txt1" runat="server" TextMode="MultiLine"
Text="Hi to all Hi to all Hi to all Hi to all
Amit Maheshwari MCN Solutions Mindcracker Network
Hiiiiii Hiiiiiii Hiiiiii Hiiiiiiiiiiiii
Welcome to all Welcome to all Welcome to all
Welcomezzzzzzzz Welcomezzzzzzzzzzz Welcomezzzzzzzz"
Rows="5" BackColor="#CCFFCC" BorderColor="#FFFF66" BorderStyle="Groove"
BorderWidth="5px" Font-Names="Comic Sans MS" Font-Size="Large"
ForeColor="#660033" Height="142px" Width="278px"/>
<br />
<br />
<asp:Button ID="btn1" runat="server" Text="Scroll" BackColor="#FFFFCC"
BorderColor="Yellow" BorderStyle="Groove" BorderWidth="5px"
Font-Names="Comic Sans MS" Font-Size="Large" ForeColor="#993333"/>
<br />
Tip: Whenever we click on the button the text will be scrolled both downwards and upwards.
</div>
</form>
</body>
</html>

Step 9: In this step we will see the design page of the Default2.aspx page which is given below:

Step 10: Now we are going to run the application by Pressing F5 let see the output of the page:

Output1:

Output2:

Output3: