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

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

Based on Matt D. Smith concept

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:

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:
animationIn: {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:
delayIn: 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:
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.

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'

Contact

You can tweet me @fabianodev