Demo
Instructions
- Download jQuery - The latest installment as of today is 1.2.6.
-
Next is to link jQuery to your document. Put the following in the <head> of your html document:
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> -
Once that's done, you'll want to create a form in the <body> of your html document. As always, feel free to use the example below.
<form id="sample" action="index.php" >
<ul>
<li>
<label for="name">Name</label><input type="text" id="name" name="name" /><span>Example: Barack Obama</span>
</li>
<li>
<label for="email">Email</label><input type="text" id="email" name="email" /><span>Example: bo@my.bo.com</span>
</li>
<li>
<label for="website">Website</label><input type="text" id="website" name="website" /><span>Example: http://www.barackobama.com</span>
</li>
</ul>
<input type="submit" value="Send Info" />
</form> -
The next thing we'll need to do is to put the logic in the <head> (below what you inserted in step 1) to make it all work. In this first half of logic, you're basically asking jQuery to add the class of "focus" to the container holding the textbox (that would be the list item). The CSS does what it does and styles any list item with the class of focus. It's that easy. We're half way there.
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#sample li input').focus(function() {
$(this).parent().addClass("focus");})
});
</script> - All we need to build now is the logic to remove the class once we've left the textbox. In javascript that's called a blur. So, on blur, remove the "focus" class. You'll want to put this on the line above the }); (the second-to-last line of the code block above).
.blur(function() {
$(this).parent().removeClass("focus");
}); -
Below is the style that I used for the "focus" class.
<style type="text/css" media="screen">
#sample ul li.focus {background:#FFFF80;}
</style>
For more tips and tutorials, please keep coming back to christopher-webb.com. In the next few weeks, I plan to delve into CSS, PHP, and more jQuery. If you have any suggestions, please feel free to Twitter me.