Sliding Labels Using MooTools
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.
Please, do the same, but for jQuery :)
@Anton : If you follow the first link, you’ll find the jQuery version.
Hey David, Glad you liked my sliding labels! Thanks for making the MooTools version!
@Tim Wright: Yeah man, great job — totally unique!
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
I don’t necessarily love it or hate it, but the concept is great!
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 :)
Nice script,
but it doesn’t work with a multi line texfield.
How can i do that?
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.
Very nice,
Though safaris autofill messes it up a bit.
@Martin: Yes it does, but is it still very nice!
Now this I really like
Very fresh approach to forms, great!
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:
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…
That’s good stuff, do you have a class version or shall I?
@Ryan Florence: I’m working on one now. Stay tuned.
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..
Very nice script and too cool !!!!
I really like it…..
Very nice script and too cool !!!!
I really like it…..
Great little script, gonna have to use it some how ..:)
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!
Whats teh purpose of this?
cool! does it work with master/content .net pages?
cool! does it work with master/content .net pages?
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 ;)
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!
great this is really informative,you did great job.
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?
this is great, thanks david
This script is really awesome, but I do have one question:
How can you use this on a TEXTAREA instead on an input?
hi,
one question, where do i paste The MooTools JavaScript? and how does it work on a textarea instead of on a input?
thanks
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.