https://github.com/maman/jvfloat.js

jQuery / Zepto plugin to emulate Matt D. Smith's floating placeholder text
https://github.com/maman/jvfloat.js

Last synced: 9 months ago
JSON representation

jQuery / Zepto plugin to emulate Matt D. Smith's floating placeholder text

Host: GitHub
URL: https://github.com/maman/jvfloat.js
Owner: maman
License: mit
Created: 2013-10-11T18:24:52.000Z (about 12 years ago)
Default Branch: master
Last Pushed: 2015-07-23T10:16:41.000Z (over 10 years ago)
Last Synced: 2025-03-29T05:07:52.418Z (9 months ago)
Language: JavaScript
Homepage: http://blog.mahardi.me/2013/10/14/jvfloatjs---the-experiment-with-form-accessbility-and-ux-in-html5/
Size: 306 KB
Stars: 659
Watchers: 28
Forks: 51
Open Issues: 8
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

#JVFloat.js - [Demo](http://bootsnipp.com/iframe/OvV)

[![Join the chat at https://gitter.im/maman/JVFloat.js](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/maman/JVFloat.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/maman/jvfloat.js/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

jQuery and Zepto plugin to emulate the behavior of [JVFloatLabeledTextField](https://github.com/jverdi/JVFloatLabeledTextField) which based on the concept from [Matt D. Smith](http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users).
Read more on [The Blog post](http://blog.mahardi.me/2013/10/14/jvfloatjs---the-experiment-with-form-accessbility-and-ux-in-html5/)

Please note that JVFloat has very basic styles, and only provide the logic of the implementation. view [jvfloat.css](https://github.com/maman/JVFloat.js/blob/master/jvfloat.css) to see the styles used in the default theme. happy hacking! :thumbsup:

#Docs
Before you begins, make sure you have included [jQuery](http://jquery.com) or [Zepto.js](http://zeptojs.com) 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:
```html

....

....

```
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](http://bower.io): `bower install JVFloat`

## Initialization
JVFloat can be initialized by calling `jvFloat()` functions, for example:
```html

$('.testBox').jvFloat();

```
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](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) and [Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) 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
* ~~Better CSS Animations~~ *need your suggestion on this one, btw*
* Better plugin code
* ~~Write better docs~~

#Changelog

* 23/07/2015 - Merged wiredep and label fixes from @ahmadalfy. bump version.
* 15/04/2014 - Release first stable version of JVFloat.js . add ability to redefine CSS on multiline `textarea`, thanks to @Jackobyte for the pull request. Also now JVFloat has a grunt-based build system.
* 31/01/2014 - JVFloat now uses actual `` elements to improve accessbility. thanks to @MrSnowflake for the pull request
* 21/12/2013 - Code refactoring. thanks to @eskimoblood for the pull request
* 11/08/2013 - Add animation when user switch to another form element, thanks to @gabceb for the pull request.
* 10/23/2013 - Fix the bug where JVFloat process all `input` elements, including `submit`, fix the animations — it's noticeably smoother! —, add support for `required` inputs, and I'm adding more detailed documentations.
* 10/12/2013 - First Commit