mooSlidingLabels

What's mooSlidingLabels?

mooSlidingLabels allows to give an alternative effect to the placeholder attribute of any given input.
Even though the placeholder attribute is HTML5 native, you can still use it in html4, or can use the value attribute, to set the label text.

Which versions of mootools is it compatible with?

mooltiselect is compatible with mootools 1.2 and 1.3.

Which browsers is it compatible with?

It was tested with IE7, IE8, FF2, FF3, Safari 5, Chrome 2 and Opera 11. All under windows.

How to use it?

You'll need a 2 things to use it. First of all the mootools Core library. you need to include the mootools file and the mooSlidingLabels file between the and of your html code.
then just add to your domready event, the call to mooSlidingLabels, something like:

window.addEvent('domready', function(){  
new mooSlidingLabel($$('input.left'));  
new mooSlidingLabel($$('input.right'),{slideTo:'right',speedOut:100,property:'value'});  
new mooSlidingLabel($$('input'),{speedOut:500,speedIn: 1500});  
new mooSlidingLabel($$('input.bottom'),{slideTo:'bottom'});  
});  

Which Properties can I pass to mooSlidingLabels, and which are the default values?

This are the available options:

slideTo: 'left',  
speedOut: 250,  
speedIn: 250,  
labelClass: 'placeholder',  
inputClass: '',  
divClass: 'container',  
property: 'placeholder'  

slideTo it's the label will slide to, accepts 'left', 'top','right' and 'bottom' any other value will be resolved as left. Default 'left.
speedOut it's the speed of the Fx.Tween to slide the label onfocus, accepts any integer nad 'short','normal' or 'long'. Defaults to 250.
speedIn it's the speed of the Fx.Tween to slide the label onblur, accepts any integer nad 'short','normal' or 'long'. Defaults to 250.
labelClass it's the class that will be assigned to the label. Default 'placeholder'
inputClass it's the class that will be assigned to the input. Default ''
divClass it's the class that will be assigned to the containing div. Default 'container'
property it's the property were mooSlidingLabels will get the text to display in the label. accepts 'value' or 'placeholder'. Default 'placeholder'.

mooSlidingLabels allows to give an alternative effect to the placeholder attribute of any given input.
Even though the placeholder attribute is HTML5 native, you can still use it in html4, or can use the value attribute, to set the label text.