Advanced Search

Overlabel technique

/ Published in: jQuery
Save to your folder(s)
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

Copy this code and paste it in your HTML 
  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. };

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

Report this snippet


Comments

You need to login to view comments.