Creating a simple watermark effect using JQuery

This another post that is focusing on how to use JQuery in ASP.Net applications. If you want to have a look at the other posts related to JQuery in my blog click here

In this post I would like to show you how to create a simple watermark effect using JQuery.Watermark is a great way to provide users with informarion without using more space on the screen.

Some basic level of knowledge of JQuery is assumed.

Sadly, we canot cover the basics of JQuery in this post so here are a few resources for you to focus on

 

1) Launch Visual Studio 2010. I have Visual studio 2010 ultimate edition but Express edition will also work. Create an ASP.Net Web application.Choose C# as the development language.Give your application an appropriate name.

2) We want to download and use the latest version of JQuery. We need to download it first. Then we need to remove the version that ships with VS 2010, 1.4.1.We will place inside the Scripts folder the 1.7 version of the JQuery library.

3)  Add a new item to your application, a web form. Name it, Watermark.aspx. Do not include the master page. This is the markup.We have two textboxes.Notice the watermark css class.


<body>
   <form id="form1" runat="server">
    <div class="mainDiv">
         
   <asp:TextBox ID="fname" class="watermark" Text="Type your First Name" 
    Tooltip="Type your First Name" runat="server"></asp:TextBox><br />
    <asp:TextBox ID="lname" class="watermark" Text="Type your Last Name" 
     Tooltip="Type your Last Name" runat="server"></asp:TextBox>
     <br /><br />
        <asp:Button ID="submit" runat="server" Text="Click me!!!" />
     
    </div>
  
    </form>
</body>


4) We will create the necessary styles.Add a new item to your application. Name it watermark.css and place it in the Styles folder.

body
{
background-color:#eaeaea;
}
 
 
.mainDiv
{
    background-color:Navy;
 
    width:410px; 
    padding:10px;
 
}
 
.watermark
{
  font-family: Arial;
     font-size:0.7em;
     font-weight:bold;
     color:#808080;
}


5) Obviously at some point we need to reference the JQuery library and the external stylesheet. In the head section Ι add the following lines.

   <link href="Styles/watermark.css" rel="stylesheet" type="text/css" />
 
    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>

 

6) Inside the head section we also write the simple JQuery code.

    <script type="text/javascript">
        $(function () {
 
            $(".watermark").each(function () {
                $txt = $(this);
                if ($txt.val() != this.title) {
                    $txt.removeClass("watermark");
 
                }
            });
 
            $(".watermark").focus(function () {
                $txt = $(this);
                if ($txt.val() == this.title) {
                    $txt.val("");
                    $txt.removeClass("watermark");
                }
            });
 
            $(".watermark").blur(function () {
                $txt = $(this);
                if ($.trim($txt.val()) == "") {
                    $txt.val(this.title);
                    $txt.addClass("watermark");
                }
            });
        });        
 
    </script>

Let me explain what the code does.In all cases with JQuery we start by checking that the DOM is loaded. We do that by using the ready function.

When the page loads both the textboxes display a message to the user. Note that the tooltip tag is rendered to title when the page is loads.

When the textbox gains focus (focus function) we remove the watermark by using the removeClass function.As you can see we compare the textbox value with the title property ( tooltip )

$(".watermark").focus(function () {
                $txt = $(this);
                if ($txt.val() == this.title) {
                    $txt.val("");
                    $txt.removeClass("watermark");
                }
            });

When moving the focus to a different control without entering a value, we put the watermark back by using the addClass function.

 $(".watermark").blur(function () {
                $txt = $(this);
                if ($.trim($txt.val()) == "") {
                    $txt.val(this.title);
                    $txt.addClass("watermark");
                }
            });

 

When the user fills in both fields we do not need to have any watermark anymore and we remove it from both textboxes. We compare the values of the textbox and the title and if they are different we remove the watermark by using the removeClass function

            $(".watermark").each(function () {
                $txt = $(this);
                if ($txt.val() != this.title) {
                    $txt.removeClass("watermark");
 
                }
            });

 

I hope you appreciate the fact that we can do so much with a few lines of JQuery code.This is the big power of JQuery library. We can do more with less. That means we have less code to write, we are more productive and our code is easier to read and more maintainable. 

View the web page on the browser and see for yourself the results.Email me if you need the source code or leave a comment with your email.

Hope it helps!!

4 Comments

Comments have been disabled for this content.