topical media & game development

talk show tell print

#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.