Demo 1
Click on textarea or input to check
Demo 2
Click on textarea or input to check
Demo 3
Click on textarea or input to check
Demo 4
Click on textarea or input to check
Demo 5
Click on textarea or input to check
Demo 6
Click on textarea or input to check
Demo 7
Click on textarea or input to check
Demo 8
Click on textarea or input to check
Demo 9
Click on textarea or input to check
Demo 10
Click on textarea or input to check
Demo 11
Click on textarea or input to check
Demo 12
Click on textarea or input to check
Demo 13
Click on textarea or input to check
Demo 14
Click on textarea or input to check
Demo 15
Click on textarea or input to check
Get it Now!
How to Use
-
Basic HTML markup
<div class="your-class"> <form> .... your inputs and textareas and your submit button (use only <button> tag for it) </form> </div> -
Use placeholder attribute and id attribute for inputs and textareas. Note! Use only <button> tag for submit buttons
<div class="your-class"> <form> <input id="your-id-1" type="text" placeholder="My Input" /> <textarea id="your-id-2" placeholder="My Textarea"></textarea> <button type="submit">Submit</button> </form> </div> -
Add foxholder-styles.css in your <head>
<link rel="stylesheet" href="css/foxholder-styles.css" /> -
Add foxholder.js in your <head> or before closing <body> tag after jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="scripts/foxholder.js"></script> -
Initialize your Foxholder in your script file or an inline script tag
jQuery('.your-class').foxholder({ demo: 1 //or other number of demo (1-15) you want to use });