<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">
<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;
}
/* Start CSS3 Animations on supported browser */
.jvFloat .placeHolder {
position: absolute;
top: 0;
left: 0;
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, -1.5em);
-moz-transform: translate(0, -1.5em);
-o-transform: translate(0, -1.5em);
-ms-transform: translate(0, -1.5em);
transform: translate(0, -1.5em);
-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 */
/*
* JVFloat.js
* modified on: 10/23/2013
*/
(function($) {
// Init Plugin Functions
$.fn.jvFloat = function() {
// Check input type - filter submit buttons.
return this.filter('input').each(function() {
// store placeholder text in placeHolder Variable
var placeholderText = $(this).attr('placeholder');
// Wrap the input in div.jvFloat
$(this).wrap('<div class=jvFloat>');
// Store the placeholder text in span.placeHolder
$(this).before('<span class=placeHolder>' + placeholderText);
// change span.placeHolder to span.placeHolder.active
$(this).bind('keyup blur', function() {
if ($(this).val() === '') {
$(this).siblings('.placeHolder').removeClass('active');
} else {
$(this).siblings('.placeHolder').addClass('active');
}
});
});
};
// Make Zeptojs & jQuery Compatible
})(window.jQuery || window.Zepto || window.$);
$(function() {
$('.testBox').jvFloat();
});
