GitHub - maman/JVFloat.js: jQuery / Zepto plugin to emulate Matt D. Smith's floating placeholder text (original) (raw)

#JVFloat.js - Demo

Join the chat at https://gitter.im/maman/JVFloat.js Bitdeli Badge

jQuery and Zepto plugin to emulate the behavior of JVFloatLabeledTextField which based on the concept from Matt D. Smith. Read more on The Blog post

Please note that JVFloat has very basic styles, and only provide the logic of the implementation. view jvfloat.css to see the styles used in the default theme. happy hacking! 👍

#Docs Before you begins, make sure you have included jQuery or Zepto.js on your page.

Installation

JVFloat consist of two parts, jvfloat.js and jvfloat.css. the minified version of the script also avalaible on jvfloat.min.js. to use JVFloat.js on your page, include JVFloat after you load jQuery or Zeptojs, for example:

.... ....

I strongly advise you to modify the default CSS file to reflect your current page, as the default CSS only consists the essential element that makes the placeholder showing and hiding animations. Please read the full CSS documentations avalaible below before you make any edit to the CSS file.

Now JVFloat is installable via Bower: bower install JVFloat

Initialization

JVFloat can be initialized by calling jvFloat() functions, for example:

by default, JVFloat.js won't process submit buttons, and automatically exclude it from being transformed.

CSS Documentation

.jvFloat

this section performs styling on the div.jvFloat wrapper around the input generated by the script.
Rules that you mustn't remove: position: relative;

.jvFloat .placeHolder

this section performs styling on the span.placeHolder element inside div.jvFloat, where the copy of input placeholder text was stored. it's hidden 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 simply red.

.jvFloat .placeHolder.active

the active state of the aftermentioned section. its job are to display the hidden span.placeHolder when users is typing on the input.
Rules that you mustn't remove: display: block;, visibility: visible;, opacity: 1

Another Notes on CSS

JVFloat uses CSS3 Transform and Transitions to perform the animations by default. Browsers that doesn't support those will simply doesn't show 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.

#TODO

#Changelog