How to apply watermark to the textbox and dropdownlist?

Create a watermark effect on your TextBox and display instructions to users, without taking up screen space.This warkmark style can applied by using the CSS and append this to your control using jquery.
Hi this is basic where we you use to get to apply watermark to the Textbox or DropDown.I have implemented this by using the jquery.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WaterMark.aspx.cs" Inherits="WaterMark" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Water Mark using jquery title>
    <style type="text/css">
        .watermarkOn
        {
            color: #CCCCCC;
            font-style: italic;
        }
     style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js">script>
    <script type="text/javascript">
        $(document).ready(function () {

            // Define what happens when the textbox comes under focus
            // Remove the watermark class and clear the box
            $("#txtUserName").focus(function () {

                $(this).filter(function () {

                    // We only want this to apply if there's not
                    // something actually entered
                    return $(this).val() == "" || $(this).val() == "Enter your name"

                }).removeClass("watermarkOn").val("");

            });

            // Define what happens when the textbox loses focus
            // Add the watermark class and default text
            $("#txtUserName").blur(function () {

                $(this).filter(function () {

                    // We only want this to apply if there's not
                    // something actually entered
                    return $(this).val() == ""

                }).addClass("watermarkOn").val("Enter your name");

            });

            //Apply watermark to the dropdown list
            var ddlLength = $('#ddlItems option:selected').val();
            if (ddlLength > 0) {

                $('#ddlItems').removeClass('watermarkOn');
            }
            else {
                $('#ddlItems')[0][0].className = "watermarkOn";
             }


         });
    script>
head>
<body>
    <form id="form1" runat="server">
    <div>
        UserName:
         <asp:TextBox ID="txtUserName" runat="server" CssClass="watermarkOn">Enter your nameasp:TextBox>
        <br />
        Choose any Language
        <asp:DropDownList ID="ddlItems" runat="server">
            <asp:ListItem Text="Select any item" Value="0">asp:ListItem>
            <asp:ListItem Text="ASP.NET" Value="1">asp:ListItem>
            <asp:ListItem Text="F#.NET" Value="3">asp:ListItem>
            <asp:ListItem Text="SQL SERVER" Value="4">asp:ListItem>
        asp:DropDownList>
        <br />
    div>
    form>
body>
html>

The output is shown in this
Output

Comments

Post a Comment

Popular posts from this blog

Exporting to excel from a custom class object using C#.NET

We may face a scenario to export the data of custom class object to excel using InterOp .You can get the property name's from the class object using Reflection.Create a work sheet header by reading the each propety of the class object.I have created a separate method to get the all properties into a list collection of string as given below         ///         /// Get the list of Properties Name into a list collection.         ///         ///         ///         public List GetPropeties(Employee objEmployee)         {             Type myType = objEmployee.GetType();             IList props = new List (myType.GetProperties());             List lstPropertiesNames = new List ();             foreach (PropertyInfo prop in props)             {                 lstPropertiesNames.Add(prop.Name);             }             return lstPropertiesNames;         } We need to call this method to create the worksheet header's as given beloe                 List lstProperties = GetPropet
Read more

Why Dispose() is preferred than Finalize() for Un-Managed Resources in .NET?

Image
Memory management is very important in any application development.The Garbage collector of .NET does almost all clean up activity for your objects.For unmanaged resources (Ex:Windows API created objects, File, Database connection objects, COM objects, etc.) are outside the scope of .NET framework. Why Dispose() is preferred than Finalize() If we use the " Finalize() " method,the  Garbage collector has to make two round in order to remove the objects. For an instance ,let me explain clearly if we have two objects as Object1 and Object2 and we finalize the Object2 as given in the below image.The GC has to categorize the two objects and put the Finalize objects into Finalization Queue.The GC will clean the object1 which doesn't use the Finalize() method and process the second round of cleaning the Finalization Queue. Now at this the " Dispose() " method will come into picture.This method belongs to IDisposable() interface .So the best practise to rele
Read more