# fancify.js-master

> A simple jQuery plugin that animates the labels and inputs of form elements

Latest version **1.0.1** (published 2019-12-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install fancify.js-master
pnpm add fancify.js-master
yarn add fancify.js-master
bun add fancify.js-master
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-12-05 |
| First published | 2019-12-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Erik McCoy |
| Maintainers | serikmcc |

## Links

- npm: https://www.npmjs.com/package/fancify.js-master
- Repository: https://github.com/serikmcc-dev/fancify.js-master
- Homepage: https://github.com/serikmcc-dev/fancify.js-master#readme
- Issues: https://github.com/serikmcc-dev/fancify.js-master/issues
- npm.io page: https://npm.io/package/fancify.js-master

## Recent versions

- 1.0.1 (latest) — 2019-12-05

## README

# 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
```
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>
...
```

### 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();

});

```

---
_Source: https://npm.io/package/fancify.js-master · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._