<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Demo for <a href="https://github.com/maman/JVFloat.js" target="_blank">JVFloat.js</a> <small>Start typing in the fields</small></h2>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-2">
<input type="text" placeholder="Name" class="form-control testBox">
</div>
<div class="col-lg-2">
<input type="email" placeholder="Email" class="form-control testBox">
</div>
<div class="col-lg-2">
<input type="text" placeholder="Required input" class="form-control testBox" required>
</div>
<div class="col-lg-2">
<a href="#" class="btn btn-default btn-block">Submit</a>
</div>
</div>
</div>
/*
* Default jvFloat theme.
* modify it as you wish!
*/
.jvFloat {
position: relative;
display: inline;
margin-top: 1em;
}
.jvFloat .placeHolder.required {
color: red;
}
/* Start CSS3 Animations on supported browser */
.jvFloat .placeHolder {
position: absolute;
top: 0;
left: 0;
width: auto;
color: #0c61fc;
font-size: .8em;
font-weight: bold;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 150ms, opacity 5s;
transition: transform 150ms, opacity 5s;
opacity: 0;
visibility: hidden;
}
.jvFloat .placeHolder.active {
display: block;
visibility: visible;
-webkit-transform: translate(0, -1em);
-moz-transform: translate(0, -1em);
-o-transform: translate(0, -1em);
-ms-transform: translate(0, -1em);
transform: translate(0, -1em);
-webkit-transition: -webkit-transform 100ms, opacity 120ms;
transition: transform 100ms, opacity 120ms;
opacity: 1;
}
/* End CSS3 */
/* Legacy browser */
/*.jvFloat .placeHolder {
position: absolute;
top: -1em;
left: 0;
color: #0c61fc;
font-size: .85em;
font-weight: bold;
opacity: 0;
visibility: hidden;
}
.jvFloat .placeHolder.active {
display: block;
visibility: visible;
opacity: 1;
}*/
/* End Legacy */
/* Demo Override
also shows how to override JVFloat's default theme
*/
input:focus {
box-shadow: none !important;
}
.jvFloat .placeHolder.active {
-webkit-transform: translate(0, -1.5em);
-moz-transform: translate(0, -1.5em);
-o-transform: translate(0, -1.5em);
-ms-transform: translate(0, -1.5em);
transform: translate(0, -1em);
}
/*
* JVFloat.js
* modified on: 10/23/2013
*/(function(e){e.fn.jvFloat=function(){return this.filter("input:not([type=submit])").each(function(){var t=e(this).attr("placeholder");e(this).wrap("<div class=jvFloat>");e(this).attr("required")?e(this).before("<span class='placeHolder required'>"+t):e(this).before("<span class=placeHolder>"+t);e(this).bind("keyup blur",function(){e(this).val()===""?e(this).siblings(".placeHolder").removeClass("active"):e(this).siblings(".placeHolder").addClass("active")})})}})(window.jQuery||window.Zepto||window.$);
// Run JVFloat.js
$('input').jvFloat();
