6 Things You must know in MooTools

First of all I am big fan of the MooTools. I have started with MooTools very long ago and I am still learning new things every day from it. :)

If you are aware of MooTools then you must have gone through below points, but if your starting with the MooTools then it will be good for you to get clear with below points. This is because you will have to face these points in almost every code of the MooTools.

Here are the topics about which I am referring:

1) Dom Ready
2) New Element Creation
3) Element Selector
4) Event Binding
5) Basic Styling of Element
6) Detect Browser

MooTools Stands for “My Object Oriented Tools“

Dom Ready

This is the Window Event, which executes when DOM is defined. MooTools team has created this event, which fires as soon as the DOM is initialized.

This is developed to remove the drawbacks of the window.load event.

With DomReady we can executes our script as soon as DOM is loaded without waiting for images and other scripts to be load.

If you want to make sure that DOM element is exists while your code tries to access that element, it is better to place that code in “Dom Ready” event.

Have a look at below code snippet of the domready.

[cc lang=”javascript”]
window.addEvent(‘domready’, function(){
// Your code here
console.log(‘DOM is ready….’)
});
[/cc]

In earlier post I have explained the difference between domready and window.load.

New Element Creation

For making the rich web application and/or working with AJAX you might have to create the HTML element dynamically. Creating a new elements is very easy task with MooTools.

You can easily inject this newly created element into other elements or inside the body tag. You can bind various event to that element too.

[cc lang=”javascript”]
// Create Basic Div Element with
// class “className”
var main_box = new Element(‘div’, {‘class’: ‘className’});
[/cc]

Once you execute the above code, your div gets created but you can not see anywhere in you web page. This is because you have to inject that element into other element or body it self. So this is how your code should looks like.

[cc lang=”javascript”]
// Create Basic Div Element with
// class “className”
var main_box = new Element(‘div’, {‘class’: ‘className’});

// place element into Body tag
$$(‘body’).adopt(main_box);
[/cc]

Element Selector

Element selector is the must have factor of any javascript framework. MooTools using the slick standalone javascript element selector engine.

In MooTools $ and document.id is the replacement for the Document.GetElementById. You just have to pass the id of an element. $$ is used to get the multiple elements like elements with specific class name and element with specific pattern in ID.

$ and document.id will return the object of the selected element while $$ will return array of selected elements.

Let’s see how you can select the HTML elements in various ways.

[cc lang=”javascript”]

// get Element with ID “name”
$(‘name’)
document.id(‘name’)

// Get All Elements with Class “class”
$$(‘.class’)

// Get All Elements which
// ID starting with “demo_”
$$(‘[id^=demo_]’)

// Get All Elements
// ID Ending with “_demo”
$$(‘[id$=_demo]’)

// Get All Div Elements
// class ending with “_demo”
$$(‘div[class$=_demo]’)

// Get all links with class “demo_link”
$$(‘a.demo_link’)

[/cc]

Event Binding

You can bind various events to HTML elements using [code]addEvent[/code] method. You will need object of an element to which you want to bind the event.

[cc lang=”javascript”]
var obj = $(‘id_of_div’);

obj.addEvent(‘click’, function(){
alert(‘I am clicked’);
});
[/cc]

In above code you can find how to bind the events with the HTML element using object of the element. You can bind multiple events to single element also.

In older post I have explain about Creating a Custom Events with MooTools.

Basic Styling of Element

Basic styling includes the adding/removing the CSS property to element and adding/removing css class of the element. Again you will need object of any element to perform this task.

[cc lang=”javascript”]
var obj = $(‘id_here’);

// Add Single Style
obj.setStyle(‘color’,’#000000′);

// Add Multiple Styles
obj.setStyles({
‘color’:’#000000′,
‘float’:’left’
});

// Remove Style
obj.removeStyle(‘color’);

// Add Class
obj.addClass(‘class1’);

// Remove Class
obj.removeClass(‘class1’);

[/cc]

Detect Browser

MooTools has very good class for detecting the browser of the user. Have a look at below code to know more on this.

[cc lang=”javascript”]
switch(Browser.name)
{
case “safari”:
alert(‘I am Safari’);
break;
case “chrome”:
alert(‘I am Chrome’);
break;
case “firefox”:
alert(‘I am FireFox’);
break;
case “opera”:
alert(‘I am Opera’);
break;
case “ie”:
alert(‘I am IE’);
break;
}
[/cc]

Conclusion

There is so much to learn in MooTools but these are the basic things which should be clear with, if you want to go with class creation and other advance stuff with MooTools.

If you have any question then feel free to comment here.