Introduction:
In this article I will explain the Javascript code trick to
increase Asp.Net normal textbox or multiline textbox size (height, width) on
mouse hover and decrease or reset textbox size on mouse out using jquery.
Sometime
while development it is needed to expand textbox on mouse over and on Mouse out
it will come to its normal size. This can be done by using jQuery or javascript
code. In this example I am using following jQuery code to do this job.
jQuery Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= txtComments.ClientID %>").hover(function () {
$(this).animate({
width: 300, height: 100 }, 400);
$(this).focus();
},
function () {
$(this).animate({
width: 200, height: 20 }, 400);
$(this).focus();
})
});
</script>
Full Page Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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 () {
$("#<%= txtComments.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="form1" runat="server">
<div>
<table>
<tr>
<td>Comments : </td>
<td><asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Style="width:200px;height:20px;"></asp:TextBox></td>
</tr>
</table>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment