Light-weight floating form label plugin for jQuery – Floatify

by Posted on

Do you want to create floating form label if yes then in this post I am going to share awesome jQuery plugin Floatify which help you to add floating form label feature on your default form like material design form. Floatify is a super tiny jQuery plugin that makes the placeholders displayed as floating labels on the top of the text fields while typing.Supports both textarea and input field. The plugin uses CSS3 to animate the floating input labels with a fade-in effect.


Libraries

Include the plugin javascript minified library jquery.floatify.min.js and Stylesheet jquery.floatify.css on page don’t forget to include jQuery core library.

<!--CSS-->
<link rel="stylesheet" href="jquery.floatify.css">
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.floatify.min.js"></script>

HTML

Create sample text input field ad textarea field with placeholders to your text fields.

<p>
        <div>
            <input type="text" placeholder="First name">
        </div>
    </p>
    <p>
        <div>
            <input type="text" placeholder="Last name">
        </div>
    </p>
    <p>
        <div>
            <input type="text" value="init" placeholder="Age">
        </div>
    </p>
    <p>
        <div>
            <textarea placeholder="Message"></textarea>
        </div>
    </p>



JS

Call the plugin and done.

$('input, textarea').floatify({
            hGap: 10
        });
 
        // just for demo
        $('button').on('click', function () {
            $('textarea').val('').triggerHandler('input');
 
            $('input').each(function () {
                $(this).val('').triggerHandler('input');
            });
        });

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by digitalify. Visit their official github repository for more information and follow for future updates.


Published by admin