Introduction: In this article I am going to share the 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 .
In previous articles i explained jQuery to limit and display number of characters left in multiline textbox and jQuery AJAX example to insert data into sql server database without postback and jQuery to disable mouse right click on images only and jQuery to get DropDownList Selected item value,text and index and Upload multiple files or images through one fileupload control using jQuery
Description: While working on feedback
form in asp.net project I got the requirement to display a textbox for getting user
comments. There were some other textboxes along with this comments textbox.
Since user can submit lengthy comments, it is recommended to use multiline
textbox. But I don’t want to place large multiline textbox on the form because
it was looking weird (not in symmetry with other normal textboxes).
So I decided to place the
multiline textbox with the dimension same as other textboxes and using jquery
implemented the functionality so that when user take the mouse over this
textbox to enter comments it expands itself and on mouse out it resets to its
original dimension as shown in demo image above.
Implementation: Let’s create a sample web page to demonstrate the
concept.
HTML Source
<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>
Now over to you:
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..