Jquery

Ashish Patel

How to set focus on first textbox of the page

Below I have given the complete sample code where the cursor will be placed on first textbox when the page loads.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ashish's Blog</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('form input:text:enabled:first').focus();
        }); 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server" />
 
    <asp:TextBox ID="TextBox2" runat="server" />
 
    <asp:TextBox ID="TextBox3" runat="server" />
 
    <asp:TextBox ID="TextBox4" runat="server" />
 
    </form>
</body>
</html>

UPDATE:

If you first textbox is disabled

$(document).ready(function() {
    $('input[type=text]:enabled:first').focus();
});

If you first textbox is not visible

$(document).ready(function() {
    $('input[type=text]:visible:first').focus();
});

Thanks.

Ashish Patel

Rollover effects using onmouseover and onmouseout events in html

I’ll show how to create Rollover effects using onmouseover and onmouseout event in html.

first create two CSS class

div.HoverON {

border:1px solid #FF2222;
}
div.HoverOFF {

border:1px solid white;
}

Now we use follow code to change HoverOFF to HoverON on onmouseover event and HoverON to HoverOFF on onmouseout event.

<div class="HoverOFF" onmouseover="this.className='HoverON'" onmouseout="this.className='HoverOFF'">
     Ashish's Blog
 </div>

Demo:

DEMO

Ashish Patel

Assign datepicker to runtime/dynamic textboxes in ASP.NET using jQuery

In this short and simple article, we will see how to assign datepicker to runtime textboxes or dynamic textboxes using jQuery in ASP.NET.
Here is code to create three textboxes dynamically (programmatically)
Code behind:

protected void Page_Load(object sender, EventArgs e)
    {
        for (int b = 0; b < 3; b++)
        {
                TextBox txtdate = new TextBox();
                txtdate.ID = "dpicker" + b.ToString();
                txtdate.CssClass = "date";   // class date
                 PlaceHolder1.Controls.Add(txtdate);
            }
    }
&#91;/code&#93;
Here we created three textbox programmatically and assigned <strong>date</strong> to CssClass property of textbox. Now we going to use jQuery UI datepicker plugin to this created textbox class. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" >
</script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js" >
</script>
<script type="text/javascript">
    $(function () {
        $(".date").datepicker();
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
               <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </div>
    </form>
</body>
</html>

For more information about Datepicker, have a look my this article.
Thanks.

Ashish Patel

Call JavaScript function from an ASP.NET AJAX enabled Content Page

If your content page is wrapped in an ASP.NET AJAX UpdatePanel, then you cannot use the ClientScript.RegisterStartupScript to call a JavaScript function during a partial-page postback. Instead, use the ScriptManager.RegisterStartupScript() method.
protected void Page_Load(object sender, EventArgs e)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@”“);

ScriptManager.RegisterStartupScript(this, this.GetType(), “ajax”, sb.ToString(), false);

}

Thanks.