Hey, It's LegosJedi again. This time, I'll be telling you about adding MooTools to your website to spice it up. You should have already downloaded MooTools from their website, but if you haven't, here's the link:

MooTools Download

There are alot of choices of items to choose, but as we go through this tutorial, each section will have a box telling you what items you need to have for this to work, like this:


And, make sure that that item is selected, as that will be needed for all the sections to work. So, if you're ready, let's jump into this tutorial.

Oh, and make sure that you have a good understanding of HTML, CSS, and JavaScript before moving on.

Table of Contents

• The Mighty Accordion
• Tooltips
• Scrolling to a point on a page

The Mighty Accordion

In this section, we'll work with the every cool Accordion. If you don't know how this works, you have headers for content. When you click on one of the headers, the open content slides closed and the content of the header you clicked on will open. Sweet, huh?


Okay, to start off, we need the HTML code:

<div id="accordion">

    <h3 class="toggler atStart">

        Header 1

    </h3>

    <div class="element atStart">

        <p>

            This is the main content for the first header.

        </p>

    </div>

    <h3 class="toggler atStart">

        Header 2

    </h3>

    <div class="element atStart">

        <p>

            This is the main content for the second header. This is probably going to be larger than the first one, so don't be suprised if it is! Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah, Blah.

        </p>

    </div>

</div>

Okay. Let me expain that. First off, the whole chunk of code needs to be in its own div. We've given it the id of 'accordion'. Inside that, we have all the sections and their content. We are using h3 headers for the sections. We've given them two classes: 'toggler' and 'atStart'. We'll get into them more when we see the JavaScript. Then, the content for the section is in its own div, and we also gave it the class of 'atStart' along with 'element'. So, each 'toggler' needs to have an 'element'.

Okay, now for the JavaScript code:

var accordion = new Accordion('h3.atStart', 'div.atStart', {

    opacity: false,

    onActive: function(toggler, element){

        toggler.setStyle('color', '#ff3300');

    },

 

    onBackground: function(toggler, element){

        toggler.setStyle('color', '#222');

    }

}, $('accordion'));

Alright. The whole reason that we add the class 'atStart' is so that the JavaScript can go and select the elements that have that class. Now, the first arguement is the sections. You want to format it so that you have the element, then a dot (.), and then the class.


Okay, now the second arguement is the content. It's going to be in the same format as the sections, and you want to use the same class. So, since we used 'atStart' for the section class, we want to use that for the content, too.

The next argument are the options and/or events. Here are full list of options:

show       integer, the Index of the element to show at start.

display       integer, the Index of the element to show at start (with a transition). defaults to 0.

fixedHeight     integer, if you want the elements to have a fixed height. defaults to false.

fixedWidth     integer, if you want the elements to have a fixed width. defaults to false.

height     boolean, will add a height transition to the accordion if true. defaults to true.

opacity     boolean, will add an opacity transition to the accordion if true. defaults to true.

width     boolean, will add a width transition to the accordion if true. defaults to false, css mastery is required to make this work!

alwaysHide     boolean, will allow to hide all elements if true, instead of always keeping one element shown. defaults to false.

And here are the events:

onActive       function to execute when an element starts to show

onBackground     function to execute when an element starts to hide

Right now, we have set the opacity to 0, and added functions so that when a section is active, it color changes.

Okay, so what if you use a CMS, and you have to add a new one depending on dynamic content? Adding a section on-the-fly is simple.

var newTog = new Element('h3', {'class': 'toggler'}).setHTML('Common descent');

 

var newEl = new Element('div', {'class': 'element'}).setHTML('<p>Look here! This was added dynamically!</p>');

 

accordion.addSection(newTog, newEl, 0);

Okay, to start, we need create a new h3 element. We give it the class of 'toggler', and set the HTML to it's title. Then, we pretty much do the same with the div. We give it the class of 'element', and set its HTML. Then, we added it to the accordion using the addSection function. the first arguement is the new section header, the second is the new div, and the third is an integer of what order this is to be placed in. Keep in mind that this works the same as a string. The first character in a string is 0, the second is 1, and so on. So, to place this new section first, we have to set the third arguement to 0.


Tooltips

You've probably seen some cool tooltips on sites. You can creat your own with MooTools, and it's simple to create. This can apply to anything, from images, to links.

<img src="/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips2" title=

"Tips Title :: This is my tip content" />

We have an image here. the title is the actual text fof the tooltip. This is also good for people who don't have JavaScript enabled, as just hoving over the object will display the title. The reason we have the '' :: " is because that sperates what is the title and the actual content of the tooltip. The first bit is the title, and the second bit is the content. Now for the JavaScript.

var Tips2 = new Tips($$('.Tips2'));

That's it. That's the entire JavaScript for the tooltip. All you need is the class of the tool tip. Put it in there as if you were writing CSS. Really simple, right? You can customize it to act differently. Like, delaying when it is displayed, and when it is hidden, keeping it in a fixed position, and using a custom class.

Here's the possible options:

 maxTitleChars       the maximum number of characters to display in the title of the tip. defaults to 30.

showDelay     the delay the onShow method is called.  (defaults to 100 ms)

hideDelay     the delay the onHide method is called.  (defaults to 100 ms)

className     the prefix for your tooltip classNames. defaults to �tool�.



the whole tooltip will have as classname: tool-tip



the title will have as classname: tool-title



the text will have as classname: tool-text

offsets     the distance of your tooltip from the mouse. an Object with x/y properties.

fixed     if set to true, the toolTip will not follow the mouse.

And then, like always, there are some events that you can attach functions to:

 onShow       optionally you can alter the default onShow behaviour with this option (like displaying a fade in effect);

onHide     optionally you can alter the default onHide behaviour with this option (like displaying a fade out effect);

Scrolling to a point on a page

You know about the basic anchors in a page that you click on and it takes you to another part of the page. With MooTools, you can click on an anchor, and it will scroll down to the section, instead of just jumping to that point.


All you need for the HTML code is the anchors. Now, as for the JavaScript code, just add the following:

new SmoothScroll();

That's it. That's all the JavaScript code you need. It'll automatically go through the HTML code, and select all the anchors, and apply the needed code to them to make this work.


Conclusion

As you can see, there are a bunch of cool things that you can do with MooTools. We've just scratched the surface. There are a bunch of other things that you can do with this. MooTools has a demo page where they go over other things, including resizing elements, sortable elements, and drag 'n drop. I hope this tutorial has gotten you interested in MooTools, and that you experiment with it some. Thanks for reading!