"jv Float demo"
Bootstrap 3.0.0 Snippet by boonlue

<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(); });

Related: See More


Questions / Comments: