advanced code snippet search

Posted By

flicity on 03/01/10


Tagged

form css jquery


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

bostonbasso
rygiel


Overlabel technique

 / Published in: jQuery
 

URL: http://scott.sauyet.com/thoughts/archives/2007/03/31/overlabel-with-jquery/

  1. Use absolute positioning to place label over the text box
  2. Hide label except when JS is enabled
  3. Use jQuery to hide label when field receives focus
Expand | Embed | Plain Text 
  1. $(document).ready(function() {
  2.     $("#header .siteSearch label").addClass("overlabel");
  3.     $("label.overlabel").overlabel();
  4. });
  5.  
  6.  
  7. jQuery.fn.overlabel = function() {
  8.     this.each(function(index) {
  9.         var label = $(this); var field;
  10.         var id = this.htmlFor || label.attr('for');
  11.         if (id && (field = document.getElementById(id))) {
  12.             var control = $(field);
  13.             label.addClass("overlabel-apply");
  14.             if (field.value !== '') {
  15.                 label.css("text-indent", "-1000px");
  16.             }
  17.             control.focus(function () {label.css("text-indent", "-1000px");}).blur(function () {
  18.                 if (this.value === '') {
  19.                     label.css("text-indent", "0px");
  20.                 }
  21.             });
  22.             label.click(function() {
  23.                 var label = $(this); var field;
  24.                 var id = this.htmlFor || label.attr('for');
  25.                 if (id && (field = document.getElementById(id))) {
  26.                     field.focus();
  27.                 }
  28.             });
  29.         }
  30.     });
  31. };

Report this snippet  

You need to login to post a comment.