Posted By

flicity on 03/01/10

Tagged

Versions (?)

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

Statistics

Viewed 539 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

Highlighted TextExpand

$(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();
                }
            });
        }
    });
};

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

Report this snippet Tweet