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


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

RSS Icon Subscribe to comments

You need to login to post a comment.