fancify.js-master
v1.0.1
Published
A simple jQuery plugin that animates the labels and inputs of form elements
Readme
fancify.js-master
A simple jQuery plugin to make fancy input form elements
Installation
With npm
- Open your command line and simply type
$ npm install fancify.js-master- Add the tags to your head
<head>
// jQuery is necessary!
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/path/to/fancify.min.js"></script>
...With zip download
- Download and extract
fancify.min.jsto your appropriate folder - Add the tags to your head
<head>
// jQuery is necessary!
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/path/to/fancify.min.js"></script>
...Usage
Important!!!
- Around each of your form input elements, add a div with a class of
.fancyInsert - Add a label to each DIV element with a class of
.fancyLabel - Add a class to your input element called
.fancyInputand a placeholder that matches your label text (preferably) - Initialize fancify on the
.fancyInputclass and watch the magic!
(See below for detailed final layout)
(HTML)
<form method="POST" action="action.php">
div class="fancyInsert">
<label for="input" class="fancyLabel">Label:</label>
<input type="text" name="input" class="fancyInput" placeholder="Fancy Input:" />
</div>
(And so on for as many as you need...)
</form>
(JS)
$(function() {
$(".fancyInput").fancify();
});