0 Members and 1 Guest are viewing this topic.

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

Offline aegkaluk

  • Administrator
  • Hero Member
  • *****
  • Posts: 1103
  • Total Like : 0
    • Email
« on: 28, 11, 2012, 11:48:30 »
Demo
http://braxtondiggs.com/tutorial/demo/ghost_effect/

Code: [Select]
<!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>