mootoolkit documentation v1

introduction

moo.fx.js provides controls to modify Height, Width, and Opacity with builtin checks that won't let a user break the effect with multiple crazy clicks.

depends on prototype.lite.js OR the full prototype.js

basic usage

Include the scripts in the head of your document

<script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>

Define an effect

var myEffect = new fx.Height(myelement , {duration: 500, onComplete: function()
  {
    alert('the effect is completed');
  }
});

Call an effect method on an event of your choice, just make sure the effect has been created first.

myEffect.toggle()

effects

• fx.Height - modify the height of the element.
• fx.Width - modify the width of the element.
• fx.Opacity - modify the opacity of the element. Has another method: setOpacity, to sudden set the opacity (crossbrowser) without displaying an effect.

methods

• toggle - toggles an element from the current position to position 0. If it's called for an fx.Height object, it will go from the current height to zero height, and from zero height to the height of the element
• hide - hides an element setting its style to opacity 0, height 0 or width 0, depending on the effect.
• custom - takes a parameters starting value and ending value. Used, for example, to half fade an element. (myEffect.custom(1, 0.5))
• clearTimer - clear an element's timer, to to allow sudden call or cancel an effect.

options

• duration - duration of the effect, in milliseconds.
• onComplete - a function that will get called upon effect completion.
• transition - transition type. A list of transitions can be found on the bottom of both moo.fx.js and moo.fx.pack.js .

introduction

moo.fx.pack is the effect extension for moo.fx. Provides combination effects, cookie based effects (will remember position), page scrolling, text resizing, and some more transitions

depends on prototype.lite (or full prototype) and moo.fx. All effects inherits moo.fx options and custom, hide, and clearTimer methods.

effects

fx.Text

Modify the text size of the element. Has an optional option, unit. default is em.

fx.Combo

Used to modify width and height and opacity togheter. Has customSize and ResizeTo as custom methods. Takes as options height:true or height: false, width:true or width:false, and opacity:true or opacity:false, and the default moo.fx options.

The method customSize takes as parameters the height to add and the width to add (myEffect.modify(100, 100)). This method assumes you have set options for both width and height.

The method ResizeTo takes as parameters the height and the width to go to (myEffect.custom(100, 100)). This method assumes you have set options for both width and height.

fx.Accordion

Creates an accordion, based on the elements of your choice.

Takes as parameters two arrays, one for the 'switches' (the elements you click on), and the other for the elements that will collapse/expande.

You can also set as options height:true or height: false, width:true or width:false, and opacity:true or opacity:false, and all the default moo.fx options. The option onComplete will work as usual, but the current element will be passed to the function.

The method showThisHideOpen takes as parameters one of the elements to be toggled, and will hide the others. Is useful if you want one section to be opened by default, or if you want to open a section from somewhere else.

fx.RememberHeight

Remembers the height of an element by writing a cookie.

Use the method resize instead of custom if you want to remember custom values.

The methods toggle and hide work as always, but also set a cookie.

fx.Scroll

The method scrollTo scrolls the window from the current position to an element's position (myEffect.scrollTo(element);).

basic moo.ajax usage

moo.ajax is a very simple ajax class, to be used with prototype.lite from moo.fx. It's roughly based on the prototype one, so their usage are very similar. To make any request just call new ajax(url, options); where url is a link to your server-side script.

options

• method - choose either post or get. The default is post.
• postBody - if you choose post as method, you can write parameters here.
• onComplete - a function that will get called upon the request completion.
• update - a dom element or an element's id. This element will be filled with the request's responsetext.

use moo.fx.pack to create an accordion effect

Let's say I want to create an accordion made of divs with class="stretcher", so I want it to execute by clicking on the link that has class="stretchtoggle".

This is the html:

<div id="main">
  <a class="stretchtoggle">Toggle this div</a>
  <div class="stretcher">
    this will be stretched by the link.
  </div>
</div>

And this is the javascript:

//we define two arrays, containing our toggles and divs.
var myDivs = document.getElementsByClassName('stretcher');
var myLinks = document.getElementsByClassName('stretchtoggle');

//then we create the effect.
var myAccordion = new fx.Accordion(myLinks, myDivs, {opacity: true});

We're done! Please note that document.getElementsByClassName is a function found in prototype.js (and prototype.lite.js)

moo.ajax, call a php script via post

This will call my script.php via post, setting as parameter sleep=3. When the request is complete I want an alert with the response text, and I want an element to be updated with the responsetext as well.

new ajax ('sleep.php', {
	postBody: 'sleep=3', 
	update: $('myelementid'), 
	onComplete: myFunction
});
//this will be called on request completion. 
//The request object will be passed by moo.ajax as default.
function myFunction(request){
  alert(request.responseText);
}

A live example is also available.

• moo.dom: easily target html elements with javascript(very useful for accordions) - from mad4milk blog.
• How to create a custom effect with moofx - from mad4milk blog.
• Smooth scrolling internal links - the effect you're seeing in this documentation.
• moo.ajax - a brief explanations and a simle example.
• prototype.js - The javascript library.