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

email form

CSSDeck G+