Navigation
 
My Semi-Usable Projects
 
Listening...
 
Me. Elsewhere.
 
Darcy
 
Things I Like
Amarok Media Player
 
License
All Content Licensed Under
Creative Commons License
Except Where Noted
(Projects Are Usually GPL)
 
easy.moo.js

easy.moo.js is a simplified system for creating nice graphical animation effects using the moo.fx libraries. It provides a simple creation system, but (currently) limits the options you can add. For example you cannot add callbacks at this time.

easy.moo requires moo.fx.js, moo.fx.pack.js and prototype.js (or prototype.lite.js).
Once these files are included easyMoo can create Accordions or Sliders, with a single function call as shown below.

The Accordion Effect
To create a content accordion you need to create two unique classes. One is the trigger class, one is the target class. These can be styled and named however you like, but any time they are used, they will spawn a new accordion piece.

To create the accordion we call the following function:

createAccordion('triggerClass','targetClass',timeout,initial_target);
This will create an accordion associating every trigger with a target, in the order it finds them. E.G. If it finds two triggers then two targets, the first trigger goes to the first target, and the second to the second.

The argument timeout is the time in milliseconds that the slider takes to toggle
The argument initial_target is an integer that sets which accordion fold is initially opened. This operates like an array, and defaults to 0.

Example

Click Click Click

First Click
Second Click
Third Click

The Slider Effect
To create a simple slider you need a target with a unique ID, a single function call, and an onclick event on the trigger you want.

First call this function:

createSlide('target_id',timeout);
Then attach this onclick to the trigger:
onclick="toggleSlide('target_id');"

Example

» Toggle Slider One
Slide Number One

Sources
» easy.moo.js Verison 0.02
» moo.fx.js, moo.fx.pack.js and prototype.lite.js @ Mad4Milk.net

Thats it for now. Feel free to extend on this script, but if you do I'd appreciate a link to the new code so I can check it out!