Get new jQuery plugins just once a week

×

labelBetter

May 31, 2014

labelBetter | jQuery plugin to create beautiful unobtrusive labels

jQuery Label Better will let you create a beautiful unobtrusive label for your form’s input fields. The uniqueness about this plugin is that all you have to do is add a placeholder text, and it shows the label only when the user needs it.

Example Code and options :


$("input.label_better").label_better({
position: "top", // This will let you define the position where the label will appear when the user clicked on the input fields. Acceptable options are "top", "bottom", "left" and "right". Default value is "top".
animationTime: 500, // This will let you control the animation speed when the label appear. This option accepts value in milliseconds. The default value is 500.
easing: "ease-in-out", // This option will let you define the CSS easing you would like to see animating the label. The option accepts all default CSS easing such as "linear", "ease" etc. Another extra option is you can use is "bounce". The default value is "ease-in-out".
offset: 20, // You can add more spacing between the input and the label. This option accepts value in pixels (without the unit). The default value is 20.
hidePlaceholderOnFocus: true // The default placeholder text will hide on focus
});

Created by Pete R.

Download

Example

labelBetter jQuery plugin

form label

labelBetter

Related posts:

Nod
Form-Help
Squire
labelBetter jQuery plugin

http://jquer.in/wp-content/uploads/2014/05/labelBetter.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever