Posted By

flicity on 03/01/10

Tagged

Versions (?)

Last Edited at 03/01/10 03:47am

Statistics

Viewed 681 times

Favorited by 1 user(s)

Related snippets

Overlabel technique

/ Published in: 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

Copy this code and paste it in your HTML

$(document).ready(function() {
    $("#header .siteSearch label").addClass("overlabel");
    $("label.overlabel").overlabel();
});
 
 
jQuery.fn.overlabel = function() {
    this.each(function(index) {
        var label = $(this); var field;
        var id = this.htmlFor || label.attr('for');
        if (id && (field = document.getElementById(id))) {
            var control = $(field);
            label.addClass("overlabel-apply");
            if (field.value !== '') {
                label.css("text-indent", "-1000px");
            }
            control.focus(function () {label.css("text-indent", "-1000px");}).blur(function () {
                if (this.value === '') {
                    label.css("text-indent", "0px");
                }
            });
            label.click(function() {
                var label = $(this); var field;
                var id = this.htmlFor || label.attr('for');
                if (id && (field = document.getElementById(id))) {
                    field.focus();
                }
            });
        }
    });
};