"Floating Labels in 3 lines of jQuery"
Bootstrap 3.2.0 Snippet by mouse0270

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

Related: See More


Questions / Comments:

I've crested it , whe the page goes to the server and back with some informations on form , the floating label is still hidded.

$('form').find('[data-toggle="floatLabel"]').each(function (ev) {
if ($(this).val()) {
$(this).attr('data-value', $(this).val());
}
});

Luiz () - 9 years ago - Reply 0


Hi , please , can you help me to make it work on ie8? the label dont go up when I input some text message on input text filed.

Luiz () - 9 years ago - Reply 0


I have the same problem . IE8 .
I'm trying to fix it, but still not progress.
Anyone help?

Mycon () - 9 years ago - Reply 0


@mouse0270:disqus.

Luiz Crivelli () - 9 years ago - Reply 0


so so so helpful and beautiful

alif () - 9 years ago - Reply 0


sorry if this is a stupid question, but why do you put the classes inside brackets ( [ ] )? Haven't noticed that before and wondering if it has a particular purpose? thanks! And I love these! :D

Lacktone () - 9 years ago - Reply 0


It is a css coding habit I have. Basically each style sheet gets its own brackets. So it would be something like this

<div class="[ form-group ][ form-group-textarea ]">

The first set of brackets contains classes from bootstrap where the second set of brackets contain classes from my personally style sheet.

Honestly for small snippets of code such as bootsnipp it is hard to get why this help, but when working with a project that has 4-6 style sheets this method really helps keep things clean and organized.

mouse0270 () - 9 years ago - Reply 0


I like that, and certainly see the benefit. I have a project with multiple styles and it does get cumbersome at times. Wanted to make sure I wasn't missing out on some reason code wise :D I only pretend to be a programmer, and fairly new to javascript / jquery.

Thanks for the quick reply!

Lacktone () - 9 years ago - Reply 0


Always a good idea to cache the selectors when using an element multiple times, and you might as well use jQuery's data function:

Matthew Hailwood () - 9 years ago - Reply 0


It is PPS not PSS, because PS is post-script so it would be post-post-script.

Bob () - 9 years ago - Reply 0


Good Catch! Fixed

mouse0270 () - 9 years ago - Reply 0


Very Nice !!!

CodeMaster () - 9 years ago - Reply 0