<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ]">
<h2 class="[ text-center ]">Floating Labels with only 3 Lines of jQuery</h2>
</div>
</div>
<div class="[ container ]">
<div class="[ row ]">
<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 ]">
<div class="[ form-group ]">
<input id="floatingLabels" name="floatingLabels" placeholder="Floating Labels" class="[ form-control ]" data-toggle="floatLabel" data-value="no-js">
<label for="floatingLabels" style="">Floating Labels</label>
</div>
</div>
</div>
<div class="[ row ]">
<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 ]">
<div class="[ form-group ]">
<input id="floatingLabelsRequired" name="floatingLabelsRequired" placeholder="Floating Labels Required" class="[ form-control ]" required data-toggle="floatLabel" data-value="no-js">
<label for="floatingLabelsRequired" style="">Floating Labels Required</label>
</div>
</div>
</div>
<div class="[ row ]">
<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 ]">
<div class="[ form-group ][ form-group-textarea ]">
<textarea id="customStyle" name="customStyle" placeholder="Custom Style" class="[ form-control ]" data-toggle="floatLabel" data-value="no-js"></textarea>
<label for="customStyle" style="">Custom style</label>
</div>
</div>
</div>
</div>
<div class="[ container ]">
<div class="[ row ]">
<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 ]">
<p>So I wanted to have some floating labels and was looking at all of the plugins that existed out there (more than I thought), but was unhappy with them all. Them seems to rely javascript to do the heavy lifting. This bothered me because I knew there had to be an easier way to handle this.</p>
<p><strong>PS:</strong> The reason I default the <code>data-value</code> to <code>no-js</code> is because this always the label to show up incase the user has javascript disabled.</p>
<p><strong>PPS:</strong> I do not know all of the standards when it comes to using jQuery and chaining, so if my code is wrong or shouldn't be written the way it is please let me know.</p>
</div>
</div>
</div>
<!-- SCRIPT NOT NEEDED ONLY USED TO MAKE TEXTAREA AUTO RESIZE -->
<script src="//cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.17/jquery.autosize.min.js"></script>
<script>$('textarea').autosize({ append: false });</script>
/* Not Need */
@import url(http://fonts.googleapis.com/css?family=Roboto:500);
body { background-color: rgb(230, 235, 240); }
/* Basic Style */
.form-group {
position: relative;
}
.form-group [data-toggle="floatLabel"] {
height: 44px;
padding-top: 16px;
}
.form-group [data-toggle="floatLabel"] + label {
font-size: 12px;
left: 12px;
opacity: 1;
position: absolute;
top: 3px;
transition: all 0.3s ease-in-out;
}
.form-group [data-toggle="floatLabel"]:required + label {
color: rgb(255, 0, 0);
}
/* Custom Styles */
.form-group.form-group-textarea {
background-color: rgb(255, 255, 255);
border-radius: 1px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
margin: 20px 15px ;
padding: 10px 0px 2px;
position: relative;
}
.form-group.form-group-textarea textarea {
height: 34px;
resize: none;
}
.form-group.form-group-textarea label {
color: rgb(160, 160, 160);
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: 500;
}
.form-group.form-group-textarea .form-control {
border-radius: 0px;
border-width: 0px;
box-shadow: none;
}
.form-group.form-group-textarea [data-toggle="floatLabel"] + label {
top: 5px;
}
/* Positioning */
.form-group [data-toggle="floatLabel"][data-value=""] {
padding-top: 6px;
}
.form-group [data-toggle="floatLabel"][data-value=""] + label {
opacity: 0;
top: 18px;
}
$(document).ready(function(){
// Floating Labels
//==============================================================
$('[data-toggle="floatLabel"]').attr('data-value', $(this).val()).on('keyup change', function() {
$(this).attr('data-value', $(this).val());
});
});
