How to use watermark using jquery

script for jquery

$(document).ready(function() {
$(“.watermark”).focus(function() {
if ($(this).val() == this.defaultValue)
{
$(this).val(“”);
}
}
);

$(“.watermark”).blur(function() {
if ($.trim($(this).val()) == “”)
{
$(this).val(this.defaultValue);
}
}
);
}
);

css for watermark
.watermark
{
color: #ccc;
}

input text for watermark using asp.net textbox control

ASP.NET and JQuery

JQuery is a library that helps javascript programmer to keep code simple and concise. It simplifies the process of traversal of HTML DOM tree. We can easily handle event, perform animation and add ajax based application using JQuery.

Below are some simple steps to configure JQuery in your ASP.NET Web Project:
Before using JQuery Code in ASP.NET, First we have to download library file from “http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js”.
Right Click your project in Solution Explorer and add new folder and named it as Scripts.
Right click and click on add existing item and browse to the file where you have downloaded jquery library file, select the file and click add.
Now you can use JQuery library by drag and drop the library file–jquery-1.2.6.js file from the Solution Explorer.

I have demonstrated a simple example of JQuery in ASP.NET. This example explore how to use JQuery to select and unselect all the checkboxes in ASP.NET CheckBoxList.
Copy and paste this code in aspx file:

$(document).ready(function() {
$(‘#chkAll’).click(
function() {
$(“INPUT[type='checkbox']“).attr(‘checked’, $(‘#chkAll’).is(‘:checked’));
});
});

Also copy this code in your cs file:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
cblist.Items.Add(new ListItem(“Items 1″,”Items 1″));
cblist.Items.Add(new ListItem(“Items 2″,”Items 2″));
cblist.Items.Add(new ListItem(“Items 3″,”Items 3″));
cblist.Items.Add(new ListItem(“Items 4″,”Items 4″));
cblist.Items.Add(new ListItem(“Items 5″,”Items 5″));
}
}

How to Configure Ajax Control Toolkit

There are few steps that helps you in configuring ajax control toolkit in Visual Studio 2008::
1)Download AjaxControlToolkit-Framework3.5.zip from http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AjaxControlToolkit&ReleaseId=8513

2)Create ASP.NET Web Application project.

3)Go into Toolbox, right click and choose Add Tab. Name it as Ajax Control Toolkit. Click on choose items and click on browse button. Then give the location of download file and find a folder SampleWebSite and go inside bin folder, then chose AjaxControlToolkit.dll and click ok.

4) After the third step, you can see the appearance of Ajax Control Toolkit and its components in Toolbox.

5) Now Enjoy the Ajax Control Toolkit.