Twitter like animated text field and textarea watermarking plugin for jQuery

ajaybc · Nov 24, 2011

I made a simple form field watermarking plugin for jQuery called "Watermarkify". It is different from any other plugin and actually allows you to create animated form field watermarks like you see in Twitter signup page. It supports text fields, password fields and Text areas.

*img266.imageshack.us/img266/4255/watermarkify1.png

HOW TO USE [STEP BY STEP]

Include the watermarkify.css and jquery.watermarkify.0.5.js along with the latest version of jQuery in the head tag of your html file.

Code:

<link href="watermarkify/watermarkify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="watermarkify/jquery.min.js"></script>
<script type="text/javascript" src="watermarkify/watermarkify.0.5.js"></script>

Now create the text fields or textareas you want the watermark applied to, and add a class or ID to identify it/them.
Remember to specify the text to be displayed as the watermark in the title tag.

Code:

<input title="Enter your name" type="text" />
<input title="Enter your Password" type="password" />
<textarea title="Enter your Address"></textarea>

Now add this script at the end of the <head> tag.

Code:

<script type="text/javascript">
$(document).ready(function(){
    $(".fields").watermarkify();
});
</script>

And that’s it. Your fields should be having the watermark texts. If you have any queries or doubts regarding the plugin please use the comment form at the bottom of the page.

View Demo : Watermarkify | Demo

Download Link and More Details : Watermarkify -jQuery animated form field watermarks plugin | Blog | Ajay Balachandran

Please check it out and give feedback

Twitter like animated text field and textarea watermarking plugin for jQuery

ajaybc

Youngling