Mootools basics + 5 useful tips

in each tips/examples we will use this short html code :

<div id="content">
	<ul id="list">
		<li>Element 1 - Title</a></li>
		<li>Element 2 - Title</a></li>
		<li>Element 3 - Title</a></li>
		<li>Element 4 - Title</a></li>
	</ul>
	<ul id="linklist">
		<li><a href="http://link1.com">Link 1 - Title</a></li>
		<li><a href="http://link2.com">Link 2 - Title</a></li>
		<li><a href="http://link3.com">Link 3 - Title</a></li>
		<li><a href="http://link4.com">Link 4 - Title</a></li>
	</ul>
</div>

before going further, here is a small reminder of the base functions of mootools

domready

Mootools functions have to be called within the domready event

window.addEvent('domready', function(){
// the code goes here
});

$()

This is the base selector of mootools it selects a single Element.

//select the elemend with id 'content'
$('content');

.getElement()

Select a Single Element within an Element

//select element with id list in element with id content
$('content').getElement('list');

$$()

Same function as $() but it selects multiple elements

//Select all li elements in #list
$$('#list li');

.getElements()

Select a multiple Elements within an Element

//Select all li element in element with id list
$('list').getElements('li');

.setStyle()

With setStyle you can set a style property of an element

//set the background-color of content to #000 and color to #fff
$('content').setStyle('background-color','#000');
$('content').setStyle('color','#fff');

.setStyles()

with setStyles you can set styles properties

//same behaviour as the 2 setStyle above
$('content').setStyles({'background-color':'#000','color':'#fff'});

.getStyle()

get the style property of an Element

//Display the background color of the element with id 'content'
alert('the background-color is '+$('content').getStyle('background-color'));

.getStyles()

get styles properties of an Element

var contentStyles=$('content').getStyles('background-color','color');
alert('the font color of content is '+contentStyles['color']);

we can now go further.

1. Styling differently even and odd element of a list (or any container)

In mootools we have two selectors dd and :even making our work very easy.
here is the code to select our even Elements and to set background color to red and font color to white

//$('list').getElements('li:even') --> selects all even li Elements
//and then set background-color and color
$('list').getElements('li:even').setStyles({ 'background-color':'#f00',
                        'color':'#fff'});

we can do the same for the odd Elements like this

$('list').getElements('li:even').setStyles({ 'background-color':'#fff',
                        'color':'#000'});

Example here

2. Inverting background and color of an Element on Click

let’s take a look at this piece of code

// The following line selects li Elements of list and for each element
// we add a function to the event click.
// the function click put in newbg the inverted color code of the current
// background-color using the function new Color().invert and do the
// same for newcol and the font color.
// after that we set the element background-color
// to newbg and font color to newcol
$('list').getElements('li').each(function (el){
	el.addEvent('click',function(){
		var newbg=new Color(el.getStyle('background-color')).invert();
		var newcol=new Color(el.getStyle('color')).invert();
		//
	el.setStyles({'background-color':newbg,'color':newcol});
	});
	});

Example here

3. Retrieving and modifying Elements data

to do that we will use get() and set() function.

//we will display the first a element in the element with id linklist
// display the href of the first a element of linklist --> http://link1.com
alert($('linklist').getElement('a').get('href'));
// change the link of the first a element
// of linklist to http://www.catswhocode.com
$('linklist').getElement('a').set('href','http://www.catswhocode.com')
// display the href of the first a element
// of linklist which is now -> http://www.catswhocode.com
alert($('linklist').getElement('a').get('href'));

Example here

with .get() and .set() you can use these parameters : id, title, href, name, value, src, class, text ….

4. Adding a fading effect to your link

a nice and easy to set effect, your link will shine like never

    //select all a element from your page
    var list = $$('a');
    list.each(function(element) {
    // We change the default 'link' property to 'cancel' for the morph effect,
    // this will ensure effects are interrupted when the mouse is leaving
    // and entering, so the morph effect being called, begins immediately
	element.set('morph', {link : 'cancel'});
	oldcolor=element.getStyle('color');
   // on mouse enter on our element we put in oldcolor the current color
   // and we morph to #aaa the result is a fading effect from the font color to #aaa
   // (you can use morph with any css property)
	element.addEvent('mouseenter', function(){
		element.morph({
			'color': '#aaa'
		});
	});
   // on mouse leave on our element we morph back to oldcolor
  // the result is a fading effect on font color from #aaa to oldcolor
	element.addEvent('mouseleave', function(){
		element.morph({
			'color': oldcolor,
		});
	});
	});

Example here

this is a simple example of what you can do with the morph function, let’s go a little bit further with the next example.

5. Make your vertical menu sexy

for this example we will add this piece of code at the top of our example html code

<style>
	a {color:black}
	ul {list-style-type:none;width:250px;}
	li {border-bottom:1px solid black;width:200px;background-color:pink;}
</style>

we can now start setting the script to enhance our menu.

// Set the cursor to pointer for all li in #linklist to show that the entire block will be clickable
	$$('#linklist li').setStyle('cursor','pointer');
// put in a list all a element in li element in #linklist
	var list = $$('#linklist li a');
// for each item
    list.each(function(element) {
// We change the default 'link' property to 'cancel' for the morph effect
// (for the same reason as in the previous example)
	element.set('morph', {link : 'cancel'});
// in element we have the  "a href" ... but the element which must be clickable
// is the entire li so we add the event click to the element's parent (which is the li)
// onclick we retrieve the href from the link and go to it
	element.getParent().addEvent('click', function(){
		window.location = element.get('href');
	});
// same thing for the effect, we set an effect to the li (changing background color)
// when mouse enter the li
	oldcolor=element.getParent().getStyle('background-color');
	element.getParent().addEvent('mouseenter', function(){
		element.getParent().morph({
			'background-color': '#ae00ff'
		});
// and then we set an effect to the "a href", which results in a slow move to the right
		element.morph({
			'padding-left': '10px'
		});
	});
// here we reset the element to his previous state when mouse leave the li
	element.getParent().addEvent('mouseleave', function(){
		element.getParent().morph({
			'background-color': oldcolor
		});
		element.morph({
			'padding-left': '0px'
		});
	});
	});

Example here

from this basic example, you can create beautiful menu, with amazing effects, the only limit is your imagination.

that’s all for this time, i hope this post will be useful to you.

My next post will be about the same subject, but we will go further.
Next time it will be about:

• Creating element on the fly
• playing with list (drag and drop, adding element, removing element …)
• and many more things