jQuery Label Better - Label your form input like a boss

jQuery Label Better - Label your form input like a boss with beautiful animation and without taking up space

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

Source: github.com

1. INCLUDE JS FILES

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.label_better.js"></script>

2. HTML

<input type="text" value="Pete R."  class="label_better" data-new-placeholder="Username" placeholder="Username" >
<input type="email" value="[email protected]"  class="label_better" data-new-placeholder="Email Address" placeholder="Email Address">
<input type="password" value="abcdefg"  class="label_better" data-new-placeholder="Password" placeholder="Password">
<input type="password" value="abcdefg" class="label_better" data-new-placeholder="Shhh.." placeholder="Confirm Password">

3. JAVASCRIPT

$(document).ready( function() {
	$(".label_better").label_better({
		easing: "bounce"
	});
});

4. OPTIONS

• position: This option will let you define the position where the label will appear relative to the input field. Acceptable options are “left”, “right”, “top" and “bottom”. The default value is “top”.
• animateTime: Adjust the number here to speed up or slow down the animation when the label appears. This option accepts the number in milliseconds (without the unit), for example, the default value is “500” which will animate the label within the 500ms time frame.
• easing: This is similar to the CSS easing option. It will let you define what kind of easing the animation will use. Acceptable values are linear, ease, ease-in, ease-out, ease-in-out and cubic-bezier which you can generate here. The default value is “ease-in-out”.
• offset: You can add spacing between the field and the label here. The option accepts numbers in pixels (without the unit). The default value is “10”.