How to expand or resize Asp.net multiline textbox on mouse over:
Expand or resize Asp.net multiline textbox on mouse over by Jquery:
Resize Asp.net multi line textbox by Jquery:
As we know that jQuery is a very fast, feature-rich and
small JavaScript library.
jQuery makes things like HTML traversal and
manipulation, and event handling, and
Ajax of browsers.jQuery a combination of extensibility and versatility .
In this tutorial we give many example related to asp.net
text box as like
We take an Example here
in this we consider a text box and try to Auto re-size textbox when we enter mouse on text box. For this we use
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Online Jquery in web
page.
Jquery function for resize Asp.net control:
Text box auto resize function.
<script type="text/javascript">
$(document).ready(function () {
$("#<%= txt1.ClientID %>").hover(function
() {
$(this).animate({ width: 300, height:
100 }, 400);
$(this).focus();
},
function () {
$(this).animate({ width: 200, height: 20
}, 400);
$(this).focus();
})
});
</script>
Asp.net web page code :
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Autoresizetextboxcontrol.aspx.cs"
Inherits="Autoresizetextboxcontrol"
%>
<!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></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= txt1.ClientID %>").hover(function
() {
$(this).animate({ width: 300, height:
100 }, 400);
$(this).focus();
},
function () {
$(this).animate({ width: 200, height: 20
}, 400);
$(this).focus();
})
});
</script>
</head>
<body>
<form id="form2" runat="server">
<div align="center"
style="height: 123px; background-color:
#6699FF">
<h1 class="style1">Auto
Resize Asp.net TextBox Control</h1>
<table style="width: 494px">
<tr>
<td>Enter Text Here: </td>
<td>
<asp:TextBox ID="txt1" runat="server"
onkeyup="resizemultilineTextBox(this)"
TextMode="MultiLine"
Width="212px"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
JQuery related Post:
Comments
Post a Comment