Treehouse

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.

ydkjs-1.png

Recent Features

  • Animated 3D Flipping Menu with&nbsp;CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • Chris Coyier&#8217;s Favorite CodePen&nbsp;Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

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.

  32. […] Sliding Labels Using MooTools […]

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