MooTools for the Rest of Us Tutorial Series

Interested in how the JoomlaOS template was made?

"MooTools for the Rest of Us" is a series of tutorials that demonstrates, by example, implementation of basic
MooTools effects into a template. Using the JoomlaOS template as a reference point, you will learn how to find
the effect you're looking for, create drag-able windows, make them resize-able, fade and adjust DIV's (including live
text resize), and implement ajax links (Links that need no page refresh!).

This is not a tutorial series on javascript, nor do you need to know any to benefit from this series. You will learn how
to implement MooTools by example of work already provided...this is "MooTools for Dummies" so to speak.

Skill Level: Intermediate

Lesson One - Ideas and Resources

The Purpose and Format of this series
Where to get ideas from/documentation
Getting MooTools

Lesson Two - Setting up the Document

Javascript insertion
Testing out an effect

Lesson Three - Creating a Drag-able/Resize-able Window

Finding ideas
Implementing an idea
Duplicating several windows

Lesson Four - Opacity Fades for various windows

Recognizing windows to fade
Implementing the code
Custom Options

Lesson Five - Using Moo.Ajax for the JoomlaOS Template

Some benefits
Creating an Ajax link for the JoomlaOS Template

Special Note: The snippets below are from an older version of MooTools. MooTools 1.0 has a newer syntax and
we will be replacing the below code with the newer code soon. If you would like to get an older version of mootools
so you can use the snippets below, just download the JoomlaOS template and the script is inside.

MooTools Snippets Below:

Live Font Re-size:

var yourDiveffect = $('yourDiv').effects();

$('yourLinkId').addEvent('click', function(){

yourDiveffect.custom({

'font-size': [12, 24]

}); });
Draggable Windows:

Place this in the head:

window.onload=function(){
var draggables = $S('.yourClass');
draggables.each(function(el){
el.makeDraggable({handle: el.getElementsBySelector('.yourClass')[0]});
el.makeResizable({handle: el.getElementsBySelector('.yourClass')[0]});
});
}

Example HTML:

NOTE: this is for an entire window (don't forget to style it!)

Drag Here 1

Content Goes Here

For Opacity Toggle:

var yourDiveffect = new Fx.Opacity('yourDiv').hide();

$('yourLinkID').addEvent('click', yourDiveffect.toggle.bind(yourDiveffect));

Ajax Links for the JoomlaOS Template:

NOTE: Place this inside a link you want to have in the template.

onclick="new ajax ('yourLinkHere', {update: $('DivIdToUpdateHere')}).request();" xhref="javascript:void(0)"