1.0.1 • Published 4 years ago

fancify.js-master v1.0.1

Weekly downloads
1
License
ISC
Repository
github
Last release
4 years ago

fancify.js-master

A simple jQuery plugin to make fancy input form elements

Installation

With npm

  1. Open your command line and simply type
$ npm install fancify.js-master
  1. 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

  1. Download and extract fancify.min.js to your appropriate folder
  2. 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!!!

  1. Around each of your form input elements, add a div with a class of .fancyInsert
  2. Add a label to each DIV element with a class of .fancyLabel
  3. Add a class to your input element called .fancyInput and a placeholder that matches your label text (preferably)
  4. Initialize fancify on the .fancyInput class 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();

});
@everything-registry/sub-chunk-1646
1.0.1

4 years ago