<main>
<main>
<h1>Fieldset style float labels</h1>
<form class="flp">
<div>
<input type="text" id="fname" />
<label for="fname">First Name</label>
</div>
<div>
<input type="text" id="email" />
<label for="email">Email</label>
</div>
</form>
</main>
<!-- jQuery -->
<script src="http://thecodeplayer.com/u/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin for animation fun -->
<script src="http://thecodeplayer.com/u/js/jquery.easing.min.js" type="text/javascript"></script>
/*importing Sniglet*/
/*importing Sniglet*/
@import url("http://fonts.googleapis.com/css?family=Sniglet");
/*basic reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}
body {
padding-top: 100px;
background: hsl(120, 40%, 40%);
font-family: Sniglet;
}
main {
width: 500px; margin: 0 auto; padding-bottom: 10px;
background: white; border-radius: 3px; overflow: hidden;
}
h1 {
font-size: 24px; font-weight: normal;
background: hsl(120, 40%, 95%); color: hsl(120, 40%, 40%);
text-align: center;
padding: 20px 0; margin-bottom: 40px;
}
.flp {padding: 0 50px;}
/*Let's place the label over the input*/
.flp div {position: relative; margin-bottom: 30px;}
.flp input, .flp label {
width: 400px; display: block;
font: inherit; font-size: 16px; line-height: 24px;
/*fixed height for FF line height issue.
height = 24(lineheight) + 10*2(padding) + 2(border)*/
height: 46px;
border: 1px solid #999;
}
.flp input {padding: 10px; outline: none; border-radius: 3px;}
.flp label {
position: absolute; left: 0; top: 0;
/*left/right padding will be 2px less, adjusted by padding on .ch*/
padding: 10px 8px;
border-color: transparent; color: #666;
cursor: text;
}
/*label styles*/
.ch {
display: block; float: left;
position: relative; /*for upward animation*/
background: white;
}
.ch:first-child {padding-left: 2px;}
.ch:last-child {padding-right: 2px;}
/*active input label*/
.focussed {
/*when any input is already focussed clicking on it(label) again won't do anything*/
pointer-events: none;
}
//breakdown the labels into single character spans
//breakdown the labels into single character spans
$(".flp label").each(function(){
var sop = '<span class="ch">'; //span opening
var scl = '</span>'; //span closing
//split the label into single letters and inject span tags around them
$(this).html(sop + $(this).html().split("").join(scl+sop) + scl);
//to prevent space-only spans from collapsing
$(".ch:contains(' ')").html(" ");
})
var d;
//animation time
$(".flp input").focus(function(){
//calculate movement for .ch = half of input height
var tm = $(this).outerHeight()/2 *-1 + "px";
//label = next sibling of input
//to prevent multiple animation trigger by mistake we will use .stop() before animating any character and clear any animation queued by .delay()
$(this).next().addClass("focussed").children().stop(true).each(function(i){
d = i*50;//delay
$(this).delay(d).animate({top: tm}, 200, 'easeOutBack');
})
})
$(".flp input").blur(function(){
//animate the label down if content of the input is empty
if($(this).val() == "")
{
$(this).next().removeClass("focussed").children().stop(true).each(function(i){
d = i*50;
$(this).delay(d).animate({top: 0}, 500, 'easeInOutBack');
})
}
})