Please disable your adblock and script blockers to view this page
 

jQuery to expand or resize Asp.net multiline textbox on mouse over and mouse out

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 .

jQuery to expand or resize Asp.net multiline textbox on mouse over and mouse out


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:
" I hope you have got the trick to resize multiline textbox  on  mouse over and mouse out using jQuery and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates." 
Previous
Next Post »

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.. ConversionConversion EmoticonEmoticon