Return to Snippet

Revision: 24382
at March 1, 2010 03:56 by flicity


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

Revision: 24381
at March 1, 2010 03:47 by flicity


Initial Code
$(document).ready(function() {
    $("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();
                }
            });
        }
    });
};

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

Initial Description
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

Initial Title
Overlabel technique

Initial Tags
form, css, jquery

Initial Language
jQuery