Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Friday, November 28, 2014

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:





No comments:

Post a Comment