Expand or resize multiline textbox on mouse over and mouse out in asp.net using Jquery

In this article, I will show you how to expand the multiline textbox in asp.net c# using Jquery.
Design:-

Source code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="expandtextbox.aspx.cs" Inherits="expandtextbox" %>

<!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> textbox expand or resizeon mouse over</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%= txtmessage.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>
                    Message :
                </td>
                <td>
                    <asp:TextBox ID="txtmessage" runat="server" TextMode="MultiLine" Style="width: 200px;
                        height: 20px;"></asp:TextBox>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Output:-


Expand or resize multiline textbox on mouse over and mouse out in asp.net using Jquery Expand or resize multiline textbox on mouse over and mouse out in asp.net using Jquery Reviewed by NEERAJ SRIVASTAVA on 11:47:00 AM Rating: 5

1 comment:

  1. Wow! This is really an informative and good blog.

    www.cute-it.com

    ReplyDelete

Powered by Blogger.