Floatlabels.js - Follows the famous Float Label Pattern

floatlabels.js - Follows the famous Float Label Pattern. Built on jQuery.

The Pattern is easy to explain. On User Interaction with an input field the placeholder value moves up, and is displayed above the typed text. This Plugin offers you the possibility to upgrade your forms with this famous pattern.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

1. INCLUDE JAVASCRIPT

<script src="jquery.js" type="text/javascript"></script>
<script src="floatlabels.js" type="text/javascript"></script>

2. HTML

<input type="text" id="test-input" placeholder="This is the placeholder" class="floatlabel">

3. JAVASCRIPT

$('input.floatlabel').floatlabel();

4. INLINE DATA ATTRIBUTES

data-label: Add this to your input field if you want the floating label to be different from your placeholder value.

data-class: Add the classes you want to add to this generated label in here. You can add multiple classes by seperating with spaces.

5. JAVASCRIPT OPTIONS

slideInput: Default: true

If true the input field will slide down (height) to fit the floating label.

labelStartTop: Default: '20px'
How many pixel the label should travel when enabled. This sets the starting point of the animation from the top of the input field. Play around with it.

labelEndTop: Default: '10px'
Where the Label should stop animating in px from the top of the input field.

transitionDuration: Default: 0.3
Label Transition time in seconds.

transitionEasing: Default: 'ease-in-out'
Easing function to use. Here are some examples of other easing functions.

labelClass: Default: ''
Another way to add classes to the label element.

typeMatches: Default: /text|password|email|number|search|url/
This Regex Expression is triggered at the initializiation of the script. It checks the type="text" if the element the plugin is triggered on is valid. Some advanced users might want to expand this to the new HTML5 textfield types.