# The Ultimate Guide for Learning Mootools

Getting started with any type of framework can be an intimidating experience. To help, this week we have an in depth tutorial and long screencast to provide a crash-course for this popular JavaScript library. With so much focus on jQuery, it's easy to forget that Mootools is an equally powerful library with a huge following.

This tutorial includes a screencast available to Tuts+ Premium members.

After the initial move to Mootools I was frustrated with the lack of community support and ended up moving back to Prototype immediately. After I was more comfortable with working with frameworks I moved back to Mootools and haven't looked back.

With this tutorial, I'm going to try to make sure that you have a great beginning to the Mootools framework. I'm going to walk you through getting everything downloaded and setup as well as some of the basic elements of Mootools. After that I'm going to spend some time walking you through how to use the Mootools Docs, which is a site that you'll be visiting very often during the use of Mootools.

All right, enough stories, lets get our hands dirty.

## Some Requirements

The nice thing about working purely with javascript is we don't need to run the files on a web or local server. All you need for this tutorial is:

• A text editor/IDE
• A browser
• Some time.

For this tutorial I will be using Firefox and Firebug to show you some debugging tips, so I recommend that you use firefox as well as Firebug. Firebug will make working with Mootools, or any framework, 100x easier.

For now we are going to include both the Core and More libraries. This is just to make sure we aren't missing anything. When you become more comfortable with Mootools you will realize that not all the components are needed for specific applications, so you can custom build Mootools libraries to fit your need and keep the file sizes small.

Move over to the more builder, select every option and download the YUI compressed file.

## Setting up the Framework

Let's create a new folder called Moo and inside that folder lets create another folder called inc. Just to make things easier, create one more file inside our inc folder called js and toss both Mootools files inside that folder.

Inside our Moo folder, create a new file called index.html and open that sucker up.

Is it open? Good, now open it in Firefox as well. You should see a blank page. Switch back to your index.html file in your editor.

To include Mootools into our script, we need to add 2 lines of code to your HTML file. If you've ever included a javascript file into a script before this will be very familiar to you.

We are now setup and ready to go!

## Making Mootools talk to elements

To get Mootools to talk to elements on our page we use the $() function to get an element by it's ID. Let's create a new div, give it an ID and some text and then make Mootools talk to it. We've created out div and gave it an ID of "box". We inserted some text inside of it and created some script tags so we can start entering in some Mootools goodness. If we use the$ function and pass the id of our box, we can see that Mootools is not getting all the attributes of our "box" div. Our variable element now holds all that data.

If we refresh the page, we can't visibly see that anything is happening, but we know things are going on in the background. This is where console.log() and Firebug come into play.

If you open up Firebug, you should see a blank console. Using console.log() we can pass information to Firebug to display for us. This is extremely useful when debugging a script because you can use it to display information in various steps of your script to see where things are failing.

We can also use it to display information that otherwise wouldn't be displayed in our browser.

Lets use console.log() to display some information about our "box" div.

## Creating elements are a snap!

Mootools will also allow you to create new elements on the fly so we can let the user customize the page. To do this we are going to be using the new Element() and inject() functions.

Lets start with a fresh HTML file. Either delete everything from index.html or create a new file.

In our file we are going to create a div and 2 links. Go ahead and create those now!

We are going to use the $$() to add an event to both of our links on the page. We are going to capture the click event and then create a new element. Lastly we are going to inject our new element into our "result" div. We use$$('a') to grab all the links and then attach the addEvent() to each link. We do this because it cuts down on coding so we don't have to find each ID of the links and create addEvents for them. We are going to use the ID of each link to determine which style we need to add. Lets whip up some quick css for the boxes we are going to create.

Now it's time to create our elements and inject them into the page.

First we are creating a variable called "class" the hold the ID of the link that was clicked. Our next line takes care of creating the element. We do this by using new Element() and then passing some arguments. The first argument is the type of element we want to create. We want to create a div, so we pass a value of div. The second set is our options. We want to assign a different class depending on which link was clicked. We do this by first telling the function that we want to set the "class" option, then we pass our variable of class which will return either "blue_box" or "grey_box".

The last line is taking our new element, which we placed into a "box" variable and is injecting it into our "result" div. Mootools knows to inject it into "result" because we are passing the "result" div using a getter method as the main option.

Now if we refresh the page and start clicking our links you should see that little boxes are being created on the fly and are being added to the page.

## I have that effect on people

At this point in the tutorial you should be fairly comfortable with using getter and setter functions to get Mootools to talk to our elements.

For the last part of this tutorial I'm going to touch on some of the animation and effects functions that Mootools offers.

Lets create another new file. Inside that file create a div with some text inside of it and a link.

I've added ID's to each element so we can get Mootools talking to them.

To start, lets attach an event to the link. This should look very familiar by now.

Now that we have Mootools capturing the click event, lets make our "box" div fade in and out on each click.

Now, when we click our link the box div should fade away. If we click the link again it will reappear.

Fading is cool and all, but lets add some style to the box and see if we can make it grow!

We are going to use the tween() function to animate some attributes of our "box" div.

Inside our click event lets remove out fade() function and replace it with tween().

Now if we click the link, our box should grow taller.

The tween function takes 2 arguments. The first is the attribute we want to manipulate and the second is a value. We want to change the height of the box and we want it to animate to 200px.

What if we wanted the box to grow by 10px every time we clicked the link. First we would have to get the current height of the box. I think we can do that with our \$() getter function.

First we assign our "box" div to a variable of box. Next we use a built in function of Mootools called getHeight() to get the current height of our "box" div. We want the box to grow by 10px each time the link is clicked so we create a new variable called new_height and assign it a value of height + 10. This is taking the current height and increasing it by 10. Finally we attach the tween() function to our box variable, tell it we want to animate the height and pass it the value of new_height.

If you click the link, the box should grow. If you click it again it will continue to grow with each mouse click.

## We should document this!

Mootools has an extensive document section on their website. http://Mootools.net/docs/core

If you plan on using Mootools you will become very familiar with this section of their site. It is broken up into the different available classes and functions that Mootools has to offer.

The section that you will be visiting the most will be the Element section. This is the section that has all the information on how Mootools communicates and manipulates the elements on the page.

I've given your broad strokes to help you get used to how Mootools functions and if you would like to continue learning I suggest you read over a few of the pages in the Mootools docs.