In-Field-Labels-jQuery-Plugin
In-Field-Labels-jQuery-Plugin copied to clipboard
davist11
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field a...
h1. In-Field Labels jQuery Plugin
License: "Same as jQuery (Dual GPL + MIT)":http://docs.jquery.com/License
Author: "Doug Neiner":http://pixelgraphics.us/company
Size: Under 1KB Minified and gzipped
h2. Overview
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
h2. Browser Support
IE6+, WebKit Browsers (Safari, Chrome), Firefox 2+
* IE6 requires a background-color be set on the label to match the background of the field.
h2. Know Issues
Browser Auto-Complete can cause problems in hiding the labels. Less of an issue for Login Boxes, but much more of an issue with comment forms.
h2. Use
h3. HTML
h3. CSS
More CSS is needed to position the label nicely over the input or text area element, but since it all depends on how you have styled those elements, only the bare-bones are listed here. Keep in mind any block element can surround the label and input field. <p> is used as an example.
form p { position:relative }
label { position:absolute; top:0; left:0}
h3. Javascript
$(document).ready(function(){
$("label").inFieldLabels();
});
h2. Options
Two options can be passed along with the method or set ahead of time for all inFieldLabel controls.
To set them ahead of time, use the following syntax:
$.inFieldLabels.defaultOptions.optionName = "";
To pass them at call time, use the following syntax:
$("label").inFieldLabels({ optionName:value });
fadeOpacity: Value between 0.1 and 1.0.
When a field is focussed, its label is animated to this opacity. Defaults to 0.5
fadeDuration: Time in milliseconds
When an animation occurs, it uses this setting to determine duration. Defaults to 300
labelClass: String to be used as class
Class to be applied to the label when it is positioned over form field. Defaults to infield
davist11