jQuery Floating labels for HTML forms - jquery-floatinglabel.js v0.2.0

You should always use labels. Did the Art Director forget and put only placeholders? No problem, here we go: jquery.floatinglabel.js

Demo

Look at these ugly, placeholder-dependent inputs being lighted with a good label!

Demo code:

<link rel="stylesheet" href="stylesheets/floatinglabel.css">

<form id="form1" role="form">
	<div class="form-group">
		<input type="email" class="form-control" id="email" placeholder="Enter email">
	</div>
	<div class="form-group">
	    <input type="password" class="form-control" id="password" placeholder="Password">
	</div>
	<div class="form-group">
	    <input type="text" class="form-control" id="ignored" placeholder="I'll be ignored :(">
	</div>
	<div class="form-group">
	    <input type="submit" class="form-control btn btn-success" value="Fake submit">
	</div>
</form>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="javascripts/jquery.floatinglabel.js"></script>
<script>
	$('#form1').floatinglabel({ ignoreId: ['ignored'] });
</script>

Getting Started

You don't need the CSS file, as it is not provided, but you have to define at least a label class. By default, it is called floating-label

Make sure that your form's input has id and placeholder attributes;
Add $('form').floatinglabel(); inside a <script> tag;
And... that's it.

You can add some customization like ignoreIds array, animations and delays. Check documentation for examples and explanation

Download

You can download either compressed or uncompressed versions of floating label:

Compressed (3kb): jquery.floatinglabel.min.js
Uncompressed (4kb): jquery.floatinglabel.js

You can also download, clone and contribute with floatinglabel at GitHub

Documentation

Full customization code:

$('#form1').floatinglabel({
    ignoreId        : ['recaptcha', 'imagefield'],
    animationIn     : {top: '-25px', opacity: '1', left: '25px'},
    animationOut    : {top: '0', opacity: '0', left: '0'},
    delayIn         : 1500,
    delayOut        : 200,
    easingIn        : 'easeOutElastic',
    easingOut       : 'easeOutCirc',
    labelClass      : 'goodbye-placeholder',
    pinClass        : 'dealt-with-it'
});

These are all the options that you can set.

ignoreId: array of strings.
Default: [] (empty)

Array of strings that should have IDs of fields that will be ignored and won't have a label created by this code.

Example:

ignoreId: ['id', 'anotherfield', 'anothersadfield'],

animationIn: Object
Default: {top: '-5px', opacity: '1'}

Follows jQuery animation syntax. It represents the effect when user focus in the input.

Example:

animationIn: {top: '-20px', opacity: '.5' }

animationOut: Object
Default: {top: '0', opacity: '0'}

Follows jQuery animation syntax. It represents the effect when user focus out the input.

Example:

animationOut: {top: '0', opacity: '0'}

delayIn: integer
Default: 300

Duration of the animationIn effect in miliseconds.

Example:

delayIn: 150

delayOut: integer
Default: 300

Duration of the animationOut effect in miliseconds.

Example:

delayOut: 150

easingIn: string or false
Default: false

Easing for the animationIn, like GSGD's plugin. You must include the easing file to use a string value here.

Example:

easingIn: 'easeInOutCirc'

For complete visual reference of easings, check out easings.net

Providing a string name without easing javascript file will result in a 'undefined' error.

easingOut: string or false
Default: false

Easing for the animationOut, like GSGD's plugin. You must include the easing file to use a string value here.

Example:

delayIn: 'easeInOutCirc'

For complete visual reference of easings, check out easings.net

Providing a string name without easing javascript file will result in a 'undefined' error.

labelClass: string
Default: 'floating-label'

Class to identify and styling label generated by floating label.

Example:

labelClass: 'awesome-label'

pinClass: string
Default: 'pin'

Class attached when a input field has a label element created by floating label and the respective input field has some value in it.

Example:

pin: 'another-class'

Events

There are some events that you can be listened to. All events are fired by the input field.

floatinginstart: Fired when, on focus in, the label's animation starts
floatinginend: Fired when, on focus in, the label's animation stops
floatingoutstart: Fired when, on focus out, the label's animation starts
floatingoutend: Fired when, on focus out, the label's animation stops

Contact

You can tweet me @fabianodev