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.

Signup for access to this tutorial series and more!

Skill Level: Intermediate

SAMPLE VIDEO - Lesson One

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)"

Sign Up for this Series and more!