I have a textbox I want to change the watermark on focus.
Please correct me:
$('body').ready(function() {
$('#edit-submitted-full-name').focus(function() {
$(this).css({background:'#FFFFFF'});
});
$('#edit-submitted-full-name').blur(function() {
if ($(this).val() == '') {
$(this).css({background:'url("images/text_fullname.png") no-repeat scroll 7px 5px #FFFFFF'});
};
});
});
I think the 'scroll' bit that you most likely copied from firebug is tripping up jQuery. It works otherwise when I tried your code. The other thing it could be is the path to the image.
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<input type="text" id="edit-submitted-full-name" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('#edit-submitted-full-name').focus(function(){
$(this).css({background:'#FF00FF'});
});
$('#edit-submitted-full-name').blur(function(){
if ($(this).val() == '') {
$(this).css({background:'url(http://www.google.ae/images/srpr/nav_logo14.png) no-repeat 7px 5px #FFFFFF'});
};
});
})
</script>
</body>
</html>
you can probably do this more cleanly using a css class and avoid having to handle the path to your images. If you added a new css class called "hintable" to everything you wanted to have or not have a hint it would be doubly better.
HTMl
<input type="text" id="edit-submitted-full-name" name="edit-submitted-full-name" class="hintable" value="" />
CSS:
#edit-submitted-full-name.hint
{
url(../images/text_fullname.png) no-repeat scroll 7px 5px #FFFFFF;
}
#some-other-input.hint
{
url(../images/text_someother.png) no-repeat scroll 7px 5px #FFFFFF;
}
and then your code would look like:
$(function(){
$(".hintable").each(function(){
ToggleHint($(this)); // add class on page load to elements with "hintable" class
});
$(".hintable").focus(function(){
$(this).removeClass("hint"); // handle all focus hints
});
$(".hintable").blur(function(){
ToggleHint(this); // handle all blur hints
});
});
function ToggleHint(obj)
{
if ($(obj).val() == '') { $(obj).addClass("hint"); };
}