#JVFloat.js - Demo
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.
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:
<head>
....
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jvfloat.css">
</head>
<body>
....
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="js/jvfloat.min.js"></script>
</body>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
JVFloat can be initialized by calling jvFloat() functions, for example:
<script>
$('.testBox').jvFloat();
</script>by default, JVFloat.js won't process submit buttons, and automatically exclude it from being transformed.
this section performs styling on the div.jvFloat wrapper around the input generated by the script.
Rules that you mustn't remove: position: relative;
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;
the styling of the required placeholder. The default color is simply red.
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
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
Better CSS Animationsneed 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
<label>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
inputelements, includingsubmit, fix the animations — it's noticeably smoother! —, add support forrequiredinputs, and I'm adding more detailed documentations. - 10/12/2013 - First Commit