AuthorTopic: jQuery Textbox Ghost Effect Demo (Read 1893 times)

aegkaluk · « **on:** 28, 11, 2012, 11:48:30 »

Demo
http://braxtondiggs.com/tutorial/demo/ghost_effect/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Textbox Ghost Effect Demo</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('.ghost').each(function(index) {// Adds the Ghost effect on textbox
			if ($(this).val() === "" || $(this).val() === $(this).attr("title")) {
           		$(this).attr("value", $(this).attr("title")).css({"color": "#999"});
			}
		});
		$('.ghost').on("focusin", function() {
    		if ($(this).val() === $(this).attr("title")) {
        		$(this).val("").css({"color": "#000000"});
			}
   		}).focusout(function() {
    		if ($(this).val() === "") {
        		$(this).val($(this).attr("title")).css({"color": "#999"});
        	}
    	});
	});
</script>
</head>

<body>
<h1>jQuery Textbox Ghost Effect Demo</h1><br>
<input type="text" class="ghost" id="textfield" title="Ghost Text..." />
<p>&nbsp;</p><p>&nbsp;</p><a href="http://braxtondiggs.com/tutorial/ghost_effect">Go Back</a>
</body>
</html>

AuthorTopic: jQuery Textbox Ghost Effect Demo (Read 1893 times)

aegkaluk