JavaScript is disabled!

overLabel

overLabel();

This jQuery plugin adds an overLabel() method that makes 'overlabel' behaviour possible. Works both on labels and form fields.
Concept based on ALA's article Making Compact Forms More Accessible by Mike Brittain.

Returns

jQuery object

DOM alterations

This method adds the following hooks:

  • on the label:
    .jsOverLabel
  • on the parent of the form field:
    .jsOverLabelBlur (onblur)

Examples

<div id="search">
    <label for="searchTerms">Keywords</label>
    <input type="text" id="searchTerms">
    <input type="submit" id="submitSearch" value="Search">
</div>

Here $("#searchTerms").overLabel(); will result in the following DOM structure ($("#search label").overLabel() will give the same result):

<div id="search" class="jsOverLabelBlur">
    <label class="jsOverLabel" for="searchTerms">Keywords</label>
    <input type="text" id="searchTerms">
    <input type="submit" id="submitSearch" value="Search">
</div>

When #searchTerms gets the focus, the className "jsOverLabelBlur" is removed from the surrounding div (it is added again when the input loses focus):

<div id="search" class="">

The classNames that are added can be used like this in CSS:

div#search {
    position: relative;
}

.jsOverLabel {
    position: absolute;
    left: -9999px;
}

.jsOverLabelBlur .jsOverLabel {
    left: 0;
}

Downloads

jquery.overlabel-0.1.7.js (2.10kB)

Versions