"Float Label With Easy JavaScript | By Vijay Sasavadiya"
Bootstrap 3.3.0 Snippet by vijaysasavadiya

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="div-container">
<div class="div-heading">
<h3 class="text-center heading">Float Label With Easy JavaScript</h3>
</div>
<div class="div-content">
<a class="btn btn-square-toround btn-xl btn-bordered-primary" data-toggle="modal" data-target="#floatLabelDemo-UP"><span class="glyphicon glyphicon-chevron-up"></span> UP</a>
<a class="btn btn-square-toround btn-xl btn-bordered-success" data-toggle="modal" data-target="#floatLabelDemo-DOWN"><span class="glyphicon glyphicon-chevron-down"></span> DOWN</a>
<a class="btn btn-square-toround btn-xl btn-bordered-info" data-toggle="modal" data-target="#floatLabelDemo-LEFT"><span class="glyphicon glyphicon-chevron-left"></span> LEFT</a>
<a class="btn btn-square-toround btn-xl btn-bordered-warning" data-toggle="modal" data-target="#floatLabelDemo-RIGHT"><span class="glyphicon glyphicon-chevron-right"></span> RIGHT</a>
<div style="border:1px solid #F0AD4E;border-left:4px solid #F0AD4E; padding:10px 16px;margin-bottom:30px;;margin-top:30px;border-radius:3px 6px 6px 3px">
FOR THE DESIGNING PART<hr>
This is just based on placeholder attribute of your input element.<br>
Put the <kbd>label="..."</kbd> attribute insted of placeholder if the element does not support placeholder attribute.
</div>
<div style="border:1px solid #D9534F;border-left:4px solid #D9534F; padding:10px 16px;border-radius:3px 6px 6px 3px">
FOR THE CODING PART (in Javascript)<hr>
The Label is Shown or Hide by onfocus() & onblur() method of that element.<br>
If you work on any of that method you need to call manually in your code as below<br>
<kbd>onfocus() --> floatLabel(this)</kbd><br>
<kbd>onblur() --> hideLabel(this,lblMessae)</kbd>
</div>
</div>
</div>
<!-- Lable Animate Up Modal -->
<div class="modal fade" id="floatLabelDemo-UP" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="gridSystemModalLabel">Float Label | Animate UP</h4>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*Hide Label On DOM Load By CSS*/
.float-label>label{display:none}
.div-container{border:1px solid #428BCA;margin:30px;border-radius:20px 20px 0px 0px}
.div-heading{border-bottom:1px dashed #5BC0DE;padding-top:15px;padding-bottom:15px;margin:0px;background-color:#F5F5F5;border-radius:19px 19px 0px 0px}
.heading{color:#5FC9E5}
.div-content{padding:30px}
.btn{transition:all 0.8s;-o-transition:all 0.8s;-moz-transition:all 0.8s;-webkit-transition:all 0.8s;border-radius:0px;margin-top:10px}
.btn-rounded{border-radius:50px}
.btn-round-tosquare:hover{border-radius:0px}
.btn-square-toround:hover{border-radius:50px}
.btn-bordered-primary{color:#428BCA;background:#FFFFFF;border:2px solid #428BCA}
.btn-bordered-primary:hover{color:#FFFFFF;background:#428BCA;border:2px solid #FFFFFF}
.btn-bordered-success{color:#5CB85C;background:#FFFFFF;border:2px solid #5CB85C}
.btn-bordered-success:hover{color:#FFFFFF;background:#5CB85C;border:2px solid #FFFFFF}
.btn-bordered-info{color:#5BC0DE;background:#FFFFFF;border:2px solid #5BC0DE}
.btn-bordered-info:hover{color:#FFFFFF;background:#5BC0DE;border:2px solid #FFFFFF}
.btn-bordered-warning{color:#F0AD4E;background:#FFFFFF;border:2px solid #F0AD4E}
.btn-bordered-warning:hover{color:#FFFFFF;background:#F0AD4E;border:2px solid #FFFFFF}
.btn-bordered-danger{color:#D9534F;background:#FFFFFF;border:2px solid #D9534F}
.btn-bordered-danger:hover{color:#FFFFFF;background:#D9534F;border:2px solid #FFFFFF}
.btn-xl
{
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
}
/*Animate Label Left*/
@-webkit-keyframes labAnimateLeft{0%{-webkit-transform: translateY(30px);transform: translateY(30px)}}
@keyframes labAnimateLeft{0%{-webkit-transform: translateX(30px);-ms-transform: translateX(30px);transform: translateX(30px)}}
.label-AnimateLeft{-webkit-animation: labAnimateLeft 0.8s ease;animation: labAnimateLeft 0.8s ease}
/*Animate Label Right*/
@-webkit-keyframes labAnimateRight{0%{-webkit-transform: translateY(-30px);transform: translateY(-30px)}}
@keyframes labAnimateRight{0%{-webkit-transform: translateX(-30px);-ms-transform: translateX(-30px);ransform: translateX(-30px)}}
.label-AnimateRight{-webkit-animation: labAnimateRight 0.8s ease;animation: labAnimateRight 0.8s ease}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function floatLabel(element)
{
var labelValue = '';
element.parentElement.firstElementChild.style="display:inline-block";
var labelValue = element.getAttribute("placeholder");
if(labelValue)
{
element.parentElement.firstElementChild.innerHTML = labelValue;
element.setAttribute('placeholder','');
}
else
{
labelValue = element.getAttribute("label");
if(labelValue)
{
element.parentElement.firstElementChild.innerHTML = labelValue;
}
}
element.setAttribute('onblur','return hideLabel(this,\''+labelValue+'\')');
}
function hideLabel(element,lab)
{
element.parentElement.firstElementChild.style = "display:none";
element.setAttribute('placeholder',lab);
}
window.onload = function()
{
var classname = document.getElementsByClassName("label-input");
for (var i = 0; i < classname.length; i++)
{
classname[i].setAttribute('onfocus','return floatLabel(this)');
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: