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