mooSlidingLabels

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.

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.

You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

License » MIT license Download
or Get a quote

for customization or integration services

Post a comment

Or enter your name and Email
  • Marcelo Origoni Developer 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.
  • 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 Developer 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.