topical media & game development
#javascript-code-15-hover.js / js
// Find all input elements that are after labels that have a class of hover
$("label.hover+input")
// Wrap a div (with a class of hover-wrap) around the input element,
// resulting in HTML that looks like:
// <div class='hover-wrap'><input type="text" …/></div>
.wrap("<div class='hover-wrap'></div>")
// Whenever the input element is focused upon (either through a click
// or by keyboard), hide the label
.focus(function(){
this.prev().hide();
})
// Whenever the user has left the input element (and no text has been
// entered into it) reveal the label again.
.blur(function(){
if ( !this.value ) this.prev().show()
})
// Go through each of the input elements individually
.each(function(){
// Move the label to go inside of the <div class='hover-wrap'></div>
this.before( this.parent().prev() );
// Make sure that if a value is already in the form, that the label is
// automatically hidden
if ( this.value ) this.prev().hide();
});
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.