O'Reilly

Sliding Labels Using MooTools

By on  

A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn't require much MooTools code either!

The HTML

<form action="" method="post" id="info">
	<h2>Contact Information</h2>
    <div id="name-wrap" class="slider">
        <label for="name">Name</label>
        <input type="text" id="name" name="name">

    </div><!--/#name-wrap-->

    <div id="email-wrap"  class="slider">
        <label for="email">Email</label>
        <input type="text" id="email" name="email" />
    </div><!--/#email-wrap-->

    <div id="street-wrap"  class="slider">
        <label for="st">Street</label>

        <input type="text" id="st" name="st" />
    </div><!--/#street-wrap-->

    <div id="city-wrap"  class="slider">
        <label for="city">City & State</label>
        <input type="text" id="city" name="city" />
    </div><!--/#city-wrap-->

    <div id="zip-wrap"  class="slider">

        <label for="zip">Zip code</label>
        <input type="text" id="zip" name="zip" />
    </div><!--/#zip-wrap-->

    <input type="submit" id="btn" name="btn" value="submit" />
</form>

A simple form with DIVs wrapping labels and inputs. This probably looks like many of your forms.

The CSS

div.slider  { clear:both; position:relative; margin:0 0 10px; }
label  { cursor:pointer; display:block; }

The most important CSS snippet is the ensuring the spacing and position value for the slider DIV.

The MooTools JavaScript

//when the dom is ready...
window.addEvent('domready',function() {
	//a few settings
	var labelColor = '#999', restingPosition = 5;
	//for every form field
	$$('form#info .slider label').each(function(label){
		//set the label enhancements into place
		label.setStyles({
			color: labelColor,
			position: 'absolute',
			top: 6,
			left: restingPosition,
			display: 'inline',
			'z-index': 99
		});
		//get input value
		var input = label.getNext('input');
		//grab label width, add resting position value
		var width = label.getSize().x;
		var move = width + restingPosition;
		//onload, check if a field is filled out, if so, move the label out of the way
		if(input.get('value') !== '') {
			label.tween('left',0 - move);
		}
		// if the input is empty on focus move the label to the left
		// if it's empty on blur, move it back
		input.addEvents({
			focus: function() {
				if(input.get('value') == '') {
					label.tween('left',0 - move);
				}
				else {
					label.setStyle('left',0 - move);
				}
			},
			blur: function() {
				if(input.get('value') == ''){
					label.tween('left',restingPosition);
				}
			}
		});
	});
});

We start by grabbing all of the labels, absolute-izing their position, and grabbing each label's respective INPUT element. We calculate the width of the label, put together the moving width, and then add INPUT event listeners into place. That's it!

All credit goes to CSSKarma for the awesome idea. I don't recommend this effect for long forms -- the effect will probably become annoying quickly. Short forms are perfect candidates for this effect because the effect limited in use.

Track.js Error Reporting

Upcoming Events

Recent Features

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • 7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • Highlighter: A MooTools Search &#038; Highlight Plugin

    Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The...

  • Create Twitter-Style Dropdowns Using MooTools

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

Discussion

  1. Please, do the same, but for jQuery :)

  2. Tiago Pereira

    @Anton : If you follow the first link, you’ll find the jQuery version.

  3. Hey David, Glad you liked my sliding labels! Thanks for making the MooTools version!

  4. @Tim Wright: Yeah man, great job — totally unique!

  5. We also had seen the CSSKarma article and we have also adapted it to mootools. We did the same thing but because of the limited space, the labels slide without living the input and fade out on blur if the input is filled.

    Here is the result:
    http://www.sonicbyte.com/#contacto

  6. I don’t necessarily love it or hate it, but the concept is great!

  7. I’d use cursor:text instead of cursor:pointer for the label and change it in the complete event of the Fx…
    Anyhow, I like it :)

  8. Guido

    Nice script,

    but it doesn’t work with a multi line texfield.
    How can i do that?

  9. CBloss

    This is very interesting concept! The only thing that one has to be careful on is if the label slides too far over to one side and the user can’t read it. The way that Enric used it, though was smart and eliminates that problem.

  10. Martin

    Very nice,

    Though safaris autofill messes it up a bit.

  11. Guido

    @Martin: Yes it does, but is it still very nice!

  12. Now this I really like

  13. deef

    Very fresh approach to forms, great!

  14. Nice stuff David,
    I must say that I like the way that @Enric has done something similar but sliding the label to the right of the field.

    I have done a test with your code, adjusting it to do this (ie slide it to the right) by getting the width of the form field and using that rather than the “0” that you use.

    To do this I got the field width like this:

    fieldWidth=input.getSize().x;
    

    Then replaced these lines:

    label.tween('left',0 - move);
    

    with this:

    label.tween('left',fieldWidth - move);
    

    @Guido
    To get this to work with all fields, you could adjust the code to either add conditions for each field type or, rather than getting the input fields by using “getNext” as David’s demo code does, you could use the “for” attribute which relates each label with it’s corresponding form field.

    eg.
    change this line:

    var input = label.getNext('input')
    

    to this:

    var input = $(''+label.get('for')+'');
    

    Of course, this might not work well on select lists…

  15. That’s good stuff, do you have a class version or shall I?

  16. @Ryan Florence: I’m working on one now. Stay tuned.

  17. When i see i laugh too to see the effect, no one can think this type of unique concept, i am fan of this demo. please letme more scripts of these laughing, awesome and unique tricks..

  18. Very nice script and too cool !!!!

    I really like it…..

  19. Very nice script and too cool !!!!

    I really like it…..

  20. Great little script, gonna have to use it some how ..:)

  21. TeddyK

    Hello,

    This site is absolutely great! Many cool things. I am very, very “fresh” to designing and developing and I would love to use this tool in my smarty templates but can’t seem to get the label things right. I’m using socialengine. I hope this is an appropriate place to ask about this, I am sorry if it’s not but does anyone have any tips or know where I can ask this sort of question?

    Thank you!

  22. IH8DIVS

    Whats teh purpose of this?

  23. ethan

    cool! does it work with master/content .net pages?

  24. ethan

    cool! does it work with master/content .net pages?

  25. You should trigger the transition when the mousedown event is fired from the label element. It will act more seamlessly. Browsers don’t wait our mouseup when focusing to the form, why should they when we “click” the label?

    Also a little bug:
    After the label has been moved to the left, why the heck when I click it again the transition is fired again?!

    Details make the difference ;)

  26. Miria

    I really like this, but I want to ask, how do you insert this onto your page to make it work?
    What do you save the js code as and what do you use to insert it into your HTML?

    please let me know!

  27. great this is really informative,you did great job.

  28. Pride Grimm

    Hey, this is great, I have been working on Tim’s version with Jquery, and have had some problems with multiple forms on one page. I can’t figure out why? Any ideas?

  29. this is great, thanks david

  30. Laurens

    This script is really awesome, but I do have one question:

    How can you use this on a TEXTAREA instead on an input?

  31. sica

    hi,

    one question, where do i paste The MooTools JavaScript? and how does it work on a textarea instead of on a input?

    thanks

    • Laurens

      You need to paste the MooTools Javascript between the HEAD tags.
      When you want it in a textarea, you need a second copy of the script, and change all the ‘input’ words to ‘textarea’. then in the second copy you also change the label from .slider to something else like .slider_textarea
      then you can give the textarea that class (in this case slider_textarea) and it will work.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...