JVFloat.js - Floating placeholder text

Download   Demo

JVFloat.js is a easy yet user-friendly jQuery plugin for creating a Floating Label Text effect using HTML5 and CSS3, which is inspirit by Matt D. Smith’s Mobile Form interplay.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/jvfloat.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="js/jvfloat.min.js"></script>

2. HTML

<input type="text" placeholder="test" class="testBox">
<input type="email" placeholder="email" class="testBox">
<input type="text" placeholder="Username">
<input type="text" placeholder="Required" required>
<input type="text" placeholder="Has ID" id="testid">
<textarea placeholder="Textarea!"></textarea>
<textarea placeholder="Textarea with id!" id="textarea"></textarea>

3. JAVASCRIPT

$('input, textarea').jvFloat();

4. CSS DOCUMENT

.jvFloat

this section complete styling on the div.jvFloat wrapper nearly the input generated by the script.

Rules that you mustn’t remove: position: relative;

.jvFloat .placeHolder

this section complete styling on the span.placeHolder element inboard div.jvFloat, where the copy ofinput placeholder text was stored. it’s disappeared by default.

Rules that you mustn’t remove: position: absolute;, display: none;, visibility: hidden;,opacity: 0;

.jvFloat .placeHolder.required

the styling of the required placeholder. The default color is easy red.

.jvFloat .placeHolder.active

the active state of the after mentioned section. its job are to show the hidden span.placeHolder when users is typing on the input.

Rules that you mustn’t remove: display: block;, visibility: visible;, opacity: 1

5. ANOTHER NOTES ON CSS

JVFloat uses CSS3 Transform and Transitions to perform the animations by default. Browsers that doesn’t support those will easy doesn’t display anything when user typing on the input elements. to fix that, enable/uncomment the legacy rules on the default CSS file, and comment out the CSS3 rules.

JVFloat.js - Floating placeholder text