mooSlidingLabels

mooSlidingLabels

Released 4 years ago , Last update 4 years ago

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.

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.

Pricing

FREE

MIT license

The MIT license is an open-source license.

License » MIT license Download

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.


Or enter your name and Email
  • RH Ray Howell 3 years ago
    Hi.. Just a quick comment. The demo doesnt function in IE9 - had to click to compatiable mode to use it which usggests I would have to add the 'treat this as ie8' metatag at page level.. Is this general for mootools?
    • Marcelo Origoni Publisher 3 years ago
      The demo it's built using mootools 1.2, which is not compatible with IE9, I'm thinking in migrating it to mootools 1.4, but I'm quite short on time right now.