Placeholder Effects
Placeholder Demo 1
Click on textarea or input to check
Placeholder Demo 2
Click on textarea or input to check
Placeholder Demo 3
Click on textarea or input to check
Placeholder Demo 4
Click on textarea or input to check
Placeholder Demo 5
Click on textarea or input to check
Placeholder Demo 6
Click on textarea or input to check
Placeholder Demo 7
Click on textarea or input to check
Placeholder Demo 8
Click on textarea or input to check
Placeholder Demo 9
Click on textarea or input to check
Placeholder Demo 10
Click on textarea or input to check
Placeholder Demo 11
Click on textarea or input to check
Placeholder Demo 12
Click on textarea or input to check
Placeholder Demo 13
Click on textarea or input to check
Placeholder Demo 14
Click on textarea or input to check
Placeholder Demo 15
Click on textarea or input to check
Get it Now!
How to Use
-
Basic HTML markup
<form class="your-class"> .... your inputs and textareas and your submit button </form> -
Use placeholder attribute and id attribute for inputs and textareas.
<form class="your-class"> <input id="your-id-1" type="text" placeholder="My Input" /> <textarea id="your-id-2" placeholder="My Textarea"></textarea> <button type="submit">Submit</button> also you can use input with type="submit" as a button </form> -
Customize your button with data-attributes:
- use data-size attribute to customize a button size (by default it's middle):
- data-size="sm" - a small button
- data-size="md" - a middle button
- data-size="lg" - a large button
- use data-effect-parameter attribute to add an attribute for effect like direction (only for Demos with multiple variants, like Demo #2). Proper data-effect-parameter you can find in the parentheses near the demo variant name. If you don't specify data-effect-parameter, the default variant will be applied.
<button type="submit" data-size="sm" data-effect-parameter="horzVert">Submit<button> Helps to create small button with a Horizontal and Vertical direction of Button Demo #3 - use data-size attribute to customize a button size (by default it's middle):
-
Add foxholder.min.css from the src folder in your <head>
<link rel="stylesheet" href="css/foxholder.min.css" /> -
Add foxholder.min.js from src folder (or foxholder.js if you need a developer version) before closing <body> tag after jQuery init:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="scripts/foxholder.min.js"></script> -
Initialize your Foxholder in your script file or an inline script tag
jQuery('.your-class').foxholder({ placeholderDemo: 1, // for placeholder demo (1 - 15) buttonDemo: 1 //for button demos (1 - 8), if you need a button effect });