mootools docs - Core

mootools

the compact javascript framework

in partnership with mediatemple

  • home
  • download
  • docs
  • forum
  • demos
  • code
Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Core.js

Mootools My Object Oriented javascript.

License

MIT-style license.

MooTools Copyright

copyright © 2007 Valerio Proietti, http://mad4milk.net

MooTools Credits

  • Class is slightly based on Base.js http://dean.edwards.name/weblog/2006/03/base/ © 2006 Dean Edwards, License http://creativecommons.org/licenses/LGPL/2.1/
  • Some functions are inspired by those found in prototype.js http://prototype.conio.net/ © 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license
  • Documentation by Aaron Newton (aaron.newton [at] cnet [dot] com) and Valerio Proietti.
Summary
Core.js |
Functions |
$defined | Returns true if the passed in value/object is defined, that means is not null or undefined.
$type | Returns the type of object that matches the element passed in.
$merge | merges a number of objects recursively without referencing them or their sub-objects.
$extend | Copies all the properties from the second passed object to the first passed Object.
$native | Will add a .extend method to the objects passed as a parameter, but the property passed in will be copied to the object’s prototype only if non previously existent.
Abstract | Abstract class, to be used as singleton.
Utility Functions |
Functions |
$chk | Returns true if the passed in value/object exists or is 0, otherwise returns false.
$pick | Returns the first object if defined, otherwise returns the second.
$random | Returns a random integer number between the two passed in values.
$time | Returns the current timestamp
$clear | clears a timeout or an Interval.
window | Some properties are attached to the window object by the browser detection.

Functions

$defined

Returns true if the passed in value/object is defined, that means is not null or undefined.

Arguments

obj object to inspect

$type

Returns the type of object that matches the element passed in.

Arguments

obj the object to inspect.

Example

var myString = 'hello';
$type(myString); //returns "string"

Returns

’element? | if obj is a DOM element node
’textnode? | if obj is a DOM text node
’whitespace? | if obj is a DOM whitespace node
’arguments? | if obj is an arguments object
’object? | if obj is an object
’string? | if obj is a string
’number? | if obj is a number
’boolean? | if obj is a boolean
’function? | if obj is a function
’regexp? | if obj is a regular expression
’class? | if obj is a Class. (created with new Class, or the extend of another class).
’arguments? | if obj is the arguments object.
’collection? | if obj is a native htmlelements collection, such as childNodes, getElementsByTagName .. etc.
false | (boolean) if the object is not defined or none of the above.

$merge

merges a number of objects recursively without referencing them or their sub-objects.

Arguments

any number of objects.

Example

var mergedObj = $merge(obj1, obj2, obj3);
//obj1, obj2, and obj3 are unaltered

$extend

Copies all the properties from the second passed object to the first passed Object. If you do myWhatever.extend = $extend the first parameter will become myWhatever, and your extend function will only need one parameter.

Example

var firstOb = {
    'name': 'John',
    'lastName': 'Doe'
};
var secondOb = {
    'age': '20',
    'sex': 'male',
    'lastName': 'Dorian'
};
$extend(firstOb, secondOb);
//firstOb will become:
{
    'name': 'John',
    'lastName': 'Dorian',
    'age': '20',
    'sex': 'male'
};

Returns

The first object, extended.

$native

Will add a .extend method to the objects passed as a parameter, but the property passed in will be copied to the object’s prototype only if non previously existent. Its handy if you dont want the .extend method of an object to overwrite existing methods. Used automatically in mootools to implement Array/String/Function/Number methods to browser that dont support them whitout manual checking.

Arguments

a number of classes/native javascript objects

Abstract

Abstract class, to be used as singleton. Will add .extend to any object

Arguments

an object

Returns

the object with an .extend property, equivalent to $extend.

Utility Functions

Summary
Functions |
$chk | Returns true if the passed in value/object exists or is 0, otherwise returns false.
$pick | Returns the first object if defined, otherwise returns the second.
$random | Returns a random integer number between the two passed in values.
$time | Returns the current timestamp
$clear | clears a timeout or an Interval.

Functions

$chk

Returns true if the passed in value/object exists or is 0, otherwise returns false. Useful to accept zeroes.

Arguments

obj object to inspect

$pick

Returns the first object if defined, otherwise returns the second.

Arguments

obj | object to test
picked | the default to return

Example

function say(msg){
    alert($pick(msg, 'no meessage supplied'));
}

$random

Returns a random integer number between the two passed in values.

Arguments

min | integer, the minimum value (inclusive).
max | integer, the maximum value (inclusive).

Returns

a random integer between min and max.

$time

Returns the current timestamp

Returns

a timestamp integer.

$clear

clears a timeout or an Interval.

Returns

null

Arguments

timer the setInterval or setTimeout to clear.

Example

var myTimer = myFunction.delay(5000); //wait 5 seconds and executemy function.
myTimer = $clear(myTimer); //nevermind

See also

Function.delay, Function.periodical

window

Some properties are attached to the window object by the browser detection.

Properties

window.ie | will be set to true if the current browser is internet explorer (any).
window.ie6 | will be set to true if the current browser is internet explorer 6.
window.ie7 | will be set to true if the current browser is internet explorer 7.
window.gecko | will be set to true if the current browser is Mozilla/Gecko.
window.webkit | will be set to true if the current browser is Safari/Konqueror.
window.webkit419 | will be set to true if the current browser is Safari2 / webkit till version 419.
window.webkit420 | will be set to true if the current browser is Safari3 (Webkit SVN Build) / webkit over version 419.
window.opera | is set to true by opera itself.

Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and tidy, and GeSHi

copyright ©2007 Valerio Proietti


mootools docs - Class

  • home
  • download
  • docs
  • forum
  • demos
  • code
Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Class.js

Contains the Class Function, aims to ease the creation of reusable Classes.

License

MIT-style license.

Summary
Class.js | Contains the Class Function, aims to ease the creation of reusable Classes.
Class | The base class object of the http:http://www.mootools.net framework.
Properties |
empty | Returns an empty function
extend | Returns the copy of the Class extended with the passed in properties.
implement | Implements the passed in properties to the base Class prototypes, altering the base class, unlike Class.extend.

Class

The base class object of the http://www.mootools.net framework. Creates a new class, its initialize method will fire upon class instantiation. Initialize wont fire on instantiation when you pass null.

Arguments

properties the collection of properties that apply to the class.

Example

var Cat = new Class({
    initialize: function(name){
    this.name = name;
    }
});
var myCat = new Cat('Micia');
alert(myCat.name); //alerts 'Micia'
Summary
Properties |
empty | Returns an empty function
extend | Returns the copy of the Class extended with the passed in properties.
implement | Implements the passed in properties to the base Class prototypes, altering the base class, unlike Class.extend.

Properties

empty

Returns an empty function

extend

Returns the copy of the Class extended with the passed in properties.

Arguments

properties the properties to add to the base class in this new Class.

Example

var Animal = new Class({
    initialize: function(age){
    this.age = age;
    }
});
var Cat = Animal.extend({
    initialize: function(name, age){
    this.parent(age); //will call the previous initialize;
    this.name = name;
    }
});
var myCat = new Cat('Micia', 20);
alert(myCat.name); //alerts 'Micia'
alert(myCat.age); //alerts 20

implement

Implements the passed in properties to the base Class prototypes, altering the base class, unlike Class.extend.

Arguments

properties the properties to add to the base class.

Example

var Animal = new Class({
    initialize: function(age){
    this.age = age;
    }
});
Animal.implement({
    setName: function(name){
    this.name = name
    }
});
var myAnimal = new Animal(20);
myAnimal.setName('Micia');
alert(myAnimal.name); //alerts 'Micia'


mootools docs - Class-Extras

  • forum
  • demos
  • code
Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Class. Extras.js

Contains common implementations for custom classes. In Mootools is implemented in Ajax, XHR and Fx.Base and many more.

License

MIT-style license.

Summary
Class. Extras.js | Contains common implementations for custom classes.
Chain | An “Utility” Class.
Properties |
chain | adds a function to the Chain instance stack.
callChain | Executes the first function of the Chain instance stack, then removes it.
clearChain | Clears the stack of a Chain instance.
Events | An “Utility” Class.
Properties |
addEvent | adds an event to the stack of events of the Class instance.
fireEvent | fires all events of the specified type in the Class instance.
removeEvent | removes an event from the stack of events of the Class instance.
Options | An “Utility” Class.
Properties |
setOptions | sets this.options

Chain

An “Utility” Class. Its methods can be implemented with Class.implement into any Class. Currently implemented in Fx.Base, XHR and Ajax. In Fx.Base for example, is used to execute a list of function, one after another, once the effect is completed. The functions will not be fired all togheter, but one every completion, to create custom complex animations.

Example

var myFx = new Fx.Style('element', 'opacity');

myFx.start(1,0).chain(function(){
    myFx.start(0,1);
}).chain(function(){
    myFx.start(1,0);
}).chain(function(){
    myFx.start(0,1);
});
//the element will appear and disappear three times
Summary
Properties |
chain | adds a function to the Chain instance stack.
callChain | Executes the first function of the Chain instance stack, then removes it.
clearChain | Clears the stack of a Chain instance.

Properties

chain

adds a function to the Chain instance stack.

Arguments

fn the function to append.

callChain

Executes the first function of the Chain instance stack, then removes it. The first function will then become the second.

clearChain

Clears the stack of a Chain instance.

Events

An “Utility” Class. Its methods can be implemented with Class.implement into any Class.

In Fx.Base Class, for example, is used to give the possibility add any number of functions to the Effects events, like onComplete, onStart, onCancel.

Example

var myFx = new Fx.Style('element','opacity').addEvent('onComplete', function(){
    alert('the effect is completed');
}).addEvent('onComplete', function(){
    alert('I told you the effect is completed');
});

myFx.start(0,1);
//upon completion it will display the 2 alerts, in order.

Implementing

This class can be implemented into other classes to add the functionality to them. Goes well with the Options class.

Example

var Widget = new Class({
    initialize: function(){},
    finish: function(){
    this.fireEvent('onComplete');
    }
});
Widget.implement(new Events);
//later...
var myWidget = new Widget();
myWidget.addEvent('onComplete', myfunction);
Summary
Properties |
addEvent | adds an event to the stack of events of the Class instance.
fireEvent | fires all events of the specified type in the Class instance.
removeEvent | removes an event from the stack of events of the Class instance.

Properties

addEvent

adds an event to the stack of events of the Class instance.

Arguments

type | string; the event name (e.g. ‘onComplete’)
fn | function to execute

fireEvent

fires all events of the specified type in the Class instance.

Arguments

type | string; the event name (e.g. ‘onComplete’)
args | array or single object; arguments to pass to the function; if more than one argument, must be an array
delay | (integer) delay (in ms) to wait to execute the event

Example

var Widget = new Class({
    initialize: function(arg1, arg2){
    ...
    this.fireEvent("onInitialize", [arg1, arg2], 50);
    }
});
Widget.implement(new Events);

removeEvent

removes an event from the stack of events of the Class instance.

Arguments

type | string; the event name (e.g. ‘onComplete’)
fn | function that was added

Options

An “Utility” Class. Its methods can be implemented with Class.implement into any Class. Used to automate the options settings, also adding Class Events when the option begins with on.

Example

var Widget = new Class({
    options: {
    color: '#fff',
    size: {
        width: 100
        height: 100
    }
    },
    initialize: function(options){
    this.setOptions(options);
    }
});
Widget.implement(new Options);
//later...
var myWidget = new Widget({
    color: '#f00',
    size: {
    width: 200
    }
});
//myWidget.options = {color: #f00, size: {width: 200, height: 100}}
Summary
Properties |
setOptions | sets this.options

Properties

setOptions

sets this.options

Arguments

defaults | object; the default set of options
options | object; the user entered options. can be empty too.

Note

if your Class has Events implemented, every option beginning with on, followed by a capital letter (onComplete) becomes an Class instance event.


mootools docs - Array

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Array.js

Contains Array prototypes, $A, $each

License

MIT-style license.

Summary
Array.js | Contains Array prototypes, $A, $each
Array | A collection of The Array Object prototype methods.
Properties |
forEach | Iterates through an array; This method is only available for browsers without native forEach support.
filter | This method is provided only for browsers without native filter support.
map | This method is provided only for browsers without native map support.
every | This method is provided only for browsers without native every support.
some | This method is provided only for browsers without native some support.
indexOf | This method is provided only for browsers without native indexOf support.
each | Same as Array.forEach.
copy | returns a copy of the array.
remove | Removes all occurrences of an item from the array.
contains | Tests an array for the presence of an item.
associate | Creates an object with key-value pairs based on the array of keywords passed in and the current content of the array.
extend | Extends an array with another one.
merge | merges an array in another array, without duplicates.
include | includes the passed in element in the array, only if its not already present.
getRandom | returns a random item in the Array
getLast | returns the last item in the Array
Utility Functions |
Functions |
$A() | Same as Array.copy, but as function.
$each | Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.

Array

A collection of The Array Object prototype methods.

Summary
Properties |
forEach | Iterates through an array; This method is only available for browsers without native forEach support.
filter | This method is provided only for browsers without native filter support.
map | This method is provided only for browsers without native map support.
every | This method is provided only for browsers without native every support.
some | This method is provided only for browsers without native some support.
indexOf | This method is provided only for browsers without native indexOf support.
each | Same as Array.forEach.
copy | returns a copy of the array.
remove | Removes all occurrences of an item from the array.
contains | Tests an array for the presence of an item.
associate | Creates an object with key-value pairs based on the array of keywords passed in and the current content of the array.
extend | Extends an array with another one.
merge | merges an array in another array, without duplicates.
include | includes the passed in element in the array, only if its not already present.
getRandom | returns a random item in the Array
getLast | returns the last item in the Array

Properties

forEach

Iterates through an array; This method is only available for browsers without native forEach support. For more info see http://developer.mozilla.org/default.htm- /en- /docs- /Core_JavaScript_1.5_Reference:Global_Objects:Array:forEach

forEach executes the provided function (callback) once for each element present in the array. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

Arguments

fn | function to execute with each item in the array; passed the item and the index of that item in the array
bind | the object to bind “this” to (see <Function.bind>)

Example

['apple','banana','lemon'].each(function(item, index) {
   alert(index + " = " + item); //alerts "0 = apple" etc.
}, bindObj); //optional second arg for binding, not used here

filter

This method is provided only for browsers without native filter support. For more info see http://developer.mozilla.org/default.htm- /en- /docs- /Core_JavaScript_1.5_Reference:Objects:Array:filter

filter calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a true value. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values. Array elements which do not pass the callback test are simply skipped, and are not included in the new array.

Arguments

fn | function to execute with each item in the array; passed the item and the index of that item in the array
bind | the object to bind “this” to (see <Function.bind>)

Example

var biggerThanTwenty = [10,3,25,100].filter(function(item, index) {
 return item > 20;
});
//biggerThanTwenty = [25,100]

map

This method is provided only for browsers without native map support. For more info see http://developer.mozilla.org/default.htm- /en- /docs- /Core_JavaScript_1.5_Reference:Global_Objects:Array:map

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

Arguments

fn | function to execute with each item in the array; passed the item and the index of that item in the array
bind | the object to bind “this” to (see <Function.bind>)

Example

var timesTwo = [1,2,3].map(function(item, index){
 return item*2;
});
//timesTwo = [2,4,6];

every

This method is provided only for browsers without native every support. For more info see http://developer.mozilla.org/default.htm- /en- /docs- /Core_JavaScript_1.5_Reference:Global_Objects:Array:every

every executes the provided callback function once for each element present in the array until it finds one where callback returns a false value. If such an element is found, the every method immediately returns false. Otherwise, if callback returned a true value for all elements, every will return true. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

Arguments

fn | function to execute with each item in the array; passed the item and the index of that item in the array
bind | the object to bind “this” to (see <Function.bind>)

Example

var areAllBigEnough = [10,4,25,100].every(function(item, index){
 return item > 20;
});
//areAllBigEnough = false

some

This method is provided only for browsers without native some support. For more info see http://developer.mozilla.org/default.htm- /en- /docs- /Core_JavaScript_1.5_Reference:Global_Objects:Array:some

some executes the callback function once for each element present in the array until it finds one where callback returns a true value. If such an element is found, some immediately returns true. Otherwise, some returns false. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

Arguments

fn | function to execute with each item in the array; passed the item and the index of that item in the array
bind | the object to bind “this” to (see <Function.bind>)

Example

var isAnyBigEnough = [10,4,25,100].some(function(item, index){
 return item > 20;
});
//isAnyBigEnough = true

indexOf

This method is provided only for browsers without native indexOf support. For more info see http://developer.mozilla.org/default.htm- /en- /docs- /Core_JavaScript_1.5_Reference:Global_Objects:Array:indexOf

indexOf compares a search element to elements of the Array using strict equality (the same method used by the ===, or triple-equals, operator).

Arguments

item | any type of object; element to locate in the array
from | integer; optional; the index of the array at which to begin the search (defaults to 0)

Example

['apple','lemon','banana'].indexOf('lemon'); //returns 1
['apple','lemon'].indexOf('banana'); //returns -1

each

Same as Array.forEach.

Arguments

fn | function to execute with each item in the array; passed the item and the index of that item in the array
bind | optional, the object that the “this” of the function will refer to.

Example

var Animals = ['Cat', 'Dog', 'Coala'];
Animals.each(function(animal){
   document.write(animal)
});

copy

returns a copy of the array.

Returns

a new array which is a copy of the current one.

Arguments

start | integer; optional; the index where to start the copy, default is 0. If negative, it is taken as the offset from the end of the array.
length | integer; optional; the number of elements to copy. By default, copies all elements from start to the end of the array.

Example

var letters = ["a","b","c"];
var copy = letters.copy();     // ["a","b","c"] (new instance)

remove

Removes all occurrences of an item from the array.

Arguments

item the item to remove

Returns

the Array with all occurrences of the item removed.

Example

["1","2","3","2"].remove("2") // ["1","3"];

contains

Tests an array for the presence of an item.

Arguments

item | the item to search for in the array.
from | integer; optional; the index at which to begin the search, default is 0. If negative, it is taken as the offset from the end of the array.

Returns

true | the item was found
false | it wasn’t

Example

["a","b","c"].contains("a"); // true
["a","b","c"].contains("d"); // false

associate

Creates an object with key-value pairs based on the array of keywords passed in and the current content of the array.

Arguments

keys the array of keywords.

Example

var Animals = ['Cat', 'Dog', 'Coala', 'Lizard'];
var Speech = ['Miao', 'Bau', 'Fruuu', 'Mute'];
var Speeches = Animals.associate(Speech);
//Speeches['Miao'] is now Cat.
//Speeches['Bau'] is now Dog.
//...

extend

Extends an array with another one.

Arguments

array the array to extend ours with

Example

var Animals = ['Cat', 'Dog', 'Coala'];
Animals.extend(['Lizard']);
//Animals is now: ['Cat', 'Dog', 'Coala', 'Lizard'];

merge

merges an array in another array, without duplicates. (case- and type-sensitive)

Arguments

array the array to merge from.

Example

['Cat','Dog'].merge(['Dog','Coala']); //returns['Cat','Dog','Coala']

include

includes the passed in element in the array, only if its not already present. (case- and type-sensitive)

Arguments

item item to add to the array (if not present)

Example

['Cat','Dog'].include('Dog'); //returns ['Cat','Dog']
['Cat','Dog'].include('Coala'); //returns ['Cat','Dog','Coala']

getRandom

returns a random item in the Array

getLast

returns the last item in the Array

Utility Functions

Summary
Functions |
$A() | Same as Array.copy, but as function.
$each | Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.

Functions

$A()

Same as Array.copy, but as function. Useful to apply Array prototypes to iterable objects, as a collection of DOM elements or the arguments object.

Example

function myFunction(){
    $A(arguments).each(argument, function(){
    alert(argument);
    });
};
//the above will alert all the arguments passed to the functionmyFunction.

$each

Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.

Arguments

iterable | an iterable element or an objct.
function | function to apply to the iterable.
bind | optional, the ‘this’ of the function will refer to this object.

Function argument

The function argument will be passed the following arguments.

item | the current item in the iterator being procesed
index | integer; the index of the item, or key in case of an object.

Examples

$each(['Sun','Mon','Tue'], function(day, index) {
    alert('name:' + day + ', index: ' + index);
});
//alerts "name: Sun, index: 0", "name: Mon, index: 1", etc.
//over an object
$each({first: "Sunday", second: "Monday", third: "Tuesday"},function(value, key){
    alert("the " + key + " day of the week is " + value);
});
//alerts "the first day of the week is Sunday",
//"the second day of the week is Monday", etc.


mootools docs - Function

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Function.js

Contains Function prototypes and utility functions .

License

MIT-style license.

Credits

  • Some functions are inspired by those found in prototype.js http://prototype.conio.net © 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license
Summary
Function.js | Contains Function prototypes and utility functions .
Function | A collection of The Function Object prototype methods.
Properties |
create | Main function to create closures.
pass | Shortcut to create closures with arguments and bind.
attempt | Tries to execute the function, returns either the result of the function or false on error.
bind | method to easily create closures with “this” altered.
bindAsEventListener | cross browser method to pass event firer
delay | Delays the execution of a function by a specified duration.
periodical | Executes a function in the specified intervals of time

Function

A collection of The Function Object prototype methods.

Summary
Properties |
create | Main function to create closures.
pass | Shortcut to create closures with arguments and bind.
attempt | Tries to execute the function, returns either the result of the function or false on error.
bind | method to easily create closures with “this” altered.
bindAsEventListener | cross browser method to pass event firer
delay | Delays the execution of a function by a specified duration.
periodical | Executes a function in the specified intervals of time

Properties

create

Main function to create closures.

Returns

a function.

Arguments

options An Options object.

Options

bind | The object that the “this” of the function will refer to. Default is the current function.
event | If set to true, the function will act as an event listener and receive an event as first argument. If set to a class name, the function will receive a new instance of this class (with the event passed as argument’s constructor) as first argument. Default is false.
arguments | A single argument or array of arguments that will be passed to the function when called.

If both the event and arguments options are set, the event is passed as first argument and the arguments array will follow.

Default is no custom arguments, the function will receive the standard arguments when called.

delay | Numeric value: if set, the returned function will delay the actual execution by this amount of milliseconds and return a timer handle when called. Default is no delay.
periodical | Numeric value: if set, the returned function will periodically perform the actual execution with this specified interval and return a timer handle when called. Default is no periodical execution.
attempt | If set to true, the returned function will try to execute and return either the results or false on error. Default is false.

pass

Shortcut to create closures with arguments and bind.

Returns

a function.

Arguments

args | the arguments passed. must be an array if arguments > 1
bind | optional, the object that the “this” of the function will refer to.

Example

myFunction.pass([arg1, arg2], myElement);

attempt

Tries to execute the function, returns either the result of the function or false on error.

Arguments

args | the arguments passed. must be an array if arguments > 1
bind | optional, the object that the “this” of the function will refer to.

Example

myFunction.attempt([arg1, arg2], myElement);

bind

method to easily create closures with “this” altered.

Arguments

bind | optional, the object that the “this” of the function will refer to.
args | optional, the arguments passed. must be an array if arguments > 1

Returns

a function.

Example

function myFunction(){
   this.setStyle('color', 'red');
   // note that 'this' here refers to myFunction, not an element
   // we'll need to bind this function to the element we want toalter
};
var myBoundFunction = myFunction.bind(myElement);
myBoundFunction(); // this will make the element myElement red.

bindAsEventListener

cross browser method to pass event firer

Arguments

bind | optional, the object that the “this” of the function will refer to.
args | optional, the arguments passed. must be an array if arguments > 1

Returns

a function with the parameter bind as its “this” and as a pre-passed argument event or window.event, depending on the browser.

Example

function myFunction(event){
   alert(event.clientx) //returns the coordinates of the mouse..
};
myElement.onclick = myFunction.bindAsEventListener(myElement);

delay

Delays the execution of a function by a specified duration.

Arguments

delay | the duration to wait in milliseconds.
bind | optional, the object that the “this” of the function will refer to.
args | optional, the arguments passed. must be an array if arguments > 1

Example

myFunction.delay(50, myElement) //wait 50 milliseconds, then callmyFunction and bind myElement to it
(function(){alert('one second later...')}).delay(1000); //wait asecond and alert

periodical

Executes a function in the specified intervals of time

Arguments

interval | the duration of the intervals between executions.
bind | optional, the object that the “this” of the function will refer to.
args | optional, the arguments passed. must be an array if arguments > 1


mootools docs - Number

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Number

A collection of The Number Object prototype methods.

Summary
Number | A collection of The Number Object prototype methods.
Properties |
toInt | Returns this number; useful because toInt must work on both Strings and Numbers.
toFloat | Returns this number as a float; useful because toFloat must work on both Strings and Numbers.
limit | Limits the number.
round | Returns the number rounded to specified precision.
times | Executes a passed in function the specified number of times

Properties

toInt

Returns this number; useful because toInt must work on both Strings and Numbers.

toFloat

Returns this number as a float; useful because toFloat must work on both Strings and Numbers.

limit

Limits the number.

Arguments

min | number, minimum value
max | number, maximum value

Returns

the number in the given limits.

Example

(12).limit(2, 6.5)  // returns 6.5
(-4).limit(2, 6.5)  // returns 2
(4.3).limit(2, 6.5) // returns 4.3

round

Returns the number rounded to specified precision.

Arguments

precision integer, number of digits after the decimal point. Can also be negative or zero (default).

Example

12.45.round() // returns 12
12.45.round(1) // returns 12.5
12.45.round(-1) // returns 10

Returns

The rounded number.

times

Executes a passed in function the specified number of times

Arguments

function the function to be executed on each iteration of the loop

Example

(4).times(alert);


mootools docs - String

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

String.js

Contains String prototypes and Number prototypes.

License

MIT-style license.

Summary
String.js | Contains String prototypes and Number prototypes.
String | A collection of The String Object prototype methods.
Properties |
test | Tests a string with a regular expression.
toInt | parses a string to an integer.
toFloat | parses a string to an float.
camelCase | Converts a hiphenated string to a camelcase string.
hyphenate | Converts a camelCased string to a hyphen-ated string.
capitalize | Converts the first letter in each word of a string to Uppercase.
trim | Trims the leading and trailing spaces off a string.
clean | trims (String.trim) a string AND removes all the double spaces in a string.
rgbToHex | Converts an RGB value to hexidecimal.
hexToRgb | Converts a hexidecimal color value to RGB.
contains | checks if the passed in string is contained in the String.
escapeRegExp | Returns string with escaped regular expression characters
rgbToHex | see String.rgbToHex, but as an array method.
hexToRgb | same as String.hexToRgb, but as an array method.

String

A collection of The String Object prototype methods.

Summary
Properties |
test | Tests a string with a regular expression.
toInt | parses a string to an integer.
toFloat | parses a string to an float.
camelCase | Converts a hiphenated string to a camelcase string.
hyphenate | Converts a camelCased string to a hyphen-ated string.
capitalize | Converts the first letter in each word of a string to Uppercase.
trim | Trims the leading and trailing spaces off a string.
clean | trims (String.trim) a string AND removes all the double spaces in a string.
rgbToHex | Converts an RGB value to hexidecimal.
hexToRgb | Converts a hexidecimal color value to RGB.
contains | checks if the passed in string is contained in the String.
escapeRegExp | Returns string with escaped regular expression characters
rgbToHex | see String.rgbToHex, but as an array method.
hexToRgb | same as String.hexToRgb, but as an array method.

Properties

test

Tests a string with a regular expression.

Arguments

regex | a string or regular expression object, the regular expression you want to match the string with
params | optional, if first parameter is a string, any parameters you want to pass to the regex (‘g’ has no effect)

Returns

true if a match for the regular expression is found in the string, false if not. See http://developer.mozilla.org/default.htm- /en- /docs- /Core_JavaScript_1.5_Reference:Objects:RegExp:test

Example

"I like cookies".test("cookie"); // returns true
"I like cookies".test("COOKIE", "i") // ignore case, returns true
"I like cookies".test("cake"); // returns false

toInt

parses a string to an integer.

Returns

either an int or “NaN” if the string is not a number.

Example

var value = "10px".toInt(); // value is 10

toFloat

parses a string to an float.

Returns

either a float or “NaN” if the string is not a number.

Example

var value = "10.848".toFloat(); // value is 10.848

camelCase

Converts a hiphenated string to a camelcase string.

Example

"I-like-cookies".camelCase(); //"ILikeCookies"

Returns

the camel cased string

hyphenate

Converts a camelCased string to a hyphen-ated string.

Example

"ILikeCookies".hyphenate(); //"I-like-cookies"

capitalize

Converts the first letter in each word of a string to Uppercase.

Example

"i like cookies".capitalize(); //"I Like Cookies"

Returns

the capitalized string

trim

Trims the leading and trailing spaces off a string.

Example

"    i like cookies     ".trim() //"i like cookies"

Returns

the trimmed string

clean

trims (String.trim) a string AND removes all the double spaces in a string.

Returns

the cleaned string

Example

" i      like     cookies      \n\n".clean() //"i like cookies"

rgbToHex

Converts an RGB value to hexidecimal. The string must be in the format of “rgb(255,255,255)” or “rgba(255,255,255,1)”;

Arguments

array boolean value, defaults to false. Use true if you want the array [‘FF’,’33’,’00’] as output instead of “#FF3300”

Returns

hex string or array. returns “transparent” if the output is set as string and the fourth value of rgba in input string is 0.

Example

"rgb(17,34,51)".rgbToHex(); //"#112233"
"rgba(17,34,51,0)".rgbToHex(); //"transparent"
"rgb(17,34,51)".rgbToHex(true); //['11','22','33']

hexToRgb

Converts a hexidecimal color value to RGB. Input string must be the hex color value (with or without the hash). Also accepts triplets (‘333’);

Arguments

array boolean value, defaults to false. Use true if you want the array [255,255,255] as output instead of “rgb(255,255,255)”;

Returns

rgb string or array.

Example

"#112233".hexToRgb(); //"rgb(17,34,51)"
"#112233".hexToRgb(true); //[17,34,51]

contains

checks if the passed in string is contained in the String. also accepts an optional second parameter, to check if the string is contained in a list of separated values.

Example

'a b c'.contains('c', ' '); //true
'a bc'.contains('bc'); //true
'a bc'.contains('b', ' '); //false

escapeRegExp

Returns string with escaped regular expression characters

Example

var search = 'animals.sheeps[1]'.escapeRegExp(); // search is now'animals\.sheeps\[1\]'

Returns

Escaped string

rgbToHex

see String.rgbToHex, but as an array method.

hexToRgb

same as String.hexToRgb, but as an array method.


mootools docs - Element

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Element.js

Contains useful Element prototypes, to be used with the dollar function $.

License

MIT-style license.

Credits

  • Some functions are inspired by those found in prototype.js http://prototype.conio.net © 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license
Summary
Element.js | Contains useful Element prototypes, to be used with the dollar function $.
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
initialize | Creates a new element of the type passed in.
Elements |
Utility Functions |
Functions |
$ | returns the element passed in with all the Element prototypes applied.
$$ | Selects, and extends DOM elements.
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
set | you can set events, styles and properties with this shortcut.
injectBefore | Inserts the Element before the passed element.
injectAfter | Same as Element.injectBefore, but inserts the element after.
injectInside | Same as Element.injectBefore, but inserts the element inside.
injectTop | Same as Element.injectInside, but inserts the element inside, at the top.
adopt | Inserts the passed elements inside the Element.
remove | Removes the Element from the DOM.
clone | Clones the Element and returns the cloned one.
replaceWith | Replaces the Element with an element passed.
appendText | Appends text node to a DOM element.
hasClass | Tests the Element to see if it has the passed in className.
addClass | Adds the passed in class to the Element, if the element doesnt already have it.
removeClass | Works like Element.addClass, but removes the class from the element.
toggleClass | Adds or removes the passed in class name to the element, depending on if it’s present or not.
setStyle | Sets a css property to the Element.
setStyles | Applies a collection of styles to the Element.
setOpacity | Sets the opacity of the Element, and sets also visibility == “hidden” if opacity == 0, and visibility = “visible” if opacity > 0.
getStyle | Returns the style of the Element given the property passed in.
getStyles | Returns an object of styles of the Element for each argument passed in.
getPrevious | Returns the previousSibling of the Element, excluding text nodes.
getNext | Works as Element.getPrevious, but tries to find the nextSibling.
getFirst | Works as Element.getPrevious, but tries to find the firstChild.
getLast | Works as Element.getPrevious, but tries to find the lastChild.
getParent | returns the $(element.parentNode)
getChildren | returns all the $(element.childNodes), excluding text nodes.
hasChild | returns true if the passed in element is a child of the $(element).
getProperty | Gets the an attribute of the Element.
removeProperty | Removes an attribute from the Element
getProperties | same as Element.getStyles, but for properties
setProperty | Sets an attribute for the Element.
setProperties | Sets numerous attributes for the Element.
setHTML | Sets the innerHTML of the Element.
getTag | Returns the tagName of the element in lower case.
empty | Empties an element of all its children.

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
initialize | Creates a new element of the type passed in.

Properties

initialize

Creates a new element of the type passed in.

Arguments

el | string; the tag name for the element you wish to create. you can also pass in an element reference, in which case it will be extended.
props | object; the properties you want to add to your element. Accepts the same keys as Element.setProperties, but also allows events and styles

Props

the key styles will be used as setStyles, the key events will be used as addEvents. any other key is used as setProperty.

Example

new Element('a', {
    'styles': {
    'display': 'block',
    'border': '1px solid black'
    },
    'events': {
    'click': function(){
        //aaa
    },
    'mousedown': function(){
        //aaa
    }
    },
    'class': 'myClassSuperClass',
    'href': '../mad4milk.net/default.htm'
});

Elements

  • Every dom function such as $$, or in general every function that returns a collection of nodes in mootools, returns them as an Elements class.
  • The purpose of the Elements class is to allow Element methods to work also on Elements array.
  • Elements is also an Array, so it accepts all the Array methods.
  • Every node of the Elements instance is already extended with $.

Example

$$('myselector').each(function(el){
 //...
});

some iterations here, $$(‘myselector’) is also an array.

$$('myselector').setStyle('color', 'red');

every element returned by $$(‘myselector’) also accepts Element methods, in this example every element will be made red.

Utility Functions

Summary
Functions |
$ | returns the element passed in with all the Element prototypes applied.
$$ | Selects, and extends DOM elements.

Functions

$

returns the element passed in with all the Element prototypes applied.

Arguments

el a reference to an actual element or a string representing the id of an element

Example

$('myElement') // gets a DOM element by id with all the Elementprototypes applied.
var div = document.getElementById('myElement');
$(div) //returns an Element also with all the mootools extentionsapplied.

You’ll use this when you aren’t sure if a variable is an actual element or an id, as well as just shorthand for document.getElementById().

Returns

a DOM element or false (if no id was found).

Note

you need to call $ on an element only once to get all the prototypes. But its no harm to call it multiple times, as it will detect if it has been already extended.

$$

Selects, and extends DOM elements. Elements arrays returned with $$ will also accept all the Element methods. The return type of element methods run through $$ is always an array. If the return array is only made by elements, $$ will be applied automatically.

Arguments

HTML Collections, arrays of elements, arrays of strings as element ids, elements, strings as selectors. Any number of the above as arguments are accepted.

Note

if you load Element.Selectors.js, $$ will also accept CSS Selectors, otherwise the only selectors supported are tag names.

Example

$$('a') //an array of all anchor tags on the page
$$('a', 'b') //an array of all anchor and bold tags on the page
$$('#myElement') //array containing only the element with id =myElement. (only with <Element.Selectors.js>)
$$('#myElement a.myClass') //an array of all anchor tags with theclass "myClass"
//within the DOM element with id "myElement" (only with<Element.Selectors.js>)
$$(myelement, myelement2, 'a', ['myid', myid2, 'myid3'],document.getElementsByTagName('div')) //an array containing:
// the element referenced as myelement if existing,
// the element referenced as myelement2 if existing,
// all the elements with a as tag in the page,
// the element with id = myid if existing
// the element with id = myid2 if existing
// the element with id = myid3 if existing
// all the elements with div as tag in the page

Returns

array array of all the dom elements matched, extended with $. Returns as Elements.

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
set | you can set events, styles and properties with this shortcut.
injectBefore | Inserts the Element before the passed element.
injectAfter | Same as Element.injectBefore, but inserts the element after.
injectInside | Same as Element.injectBefore, but inserts the element inside.
injectTop | Same as Element.injectInside, but inserts the element inside, at the top.
adopt | Inserts the passed elements inside the Element.
remove | Removes the Element from the DOM.
clone | Clones the Element and returns the cloned one.
replaceWith | Replaces the Element with an element passed.
appendText | Appends text node to a DOM element.
hasClass | Tests the Element to see if it has the passed in className.
addClass | Adds the passed in class to the Element, if the element doesnt already have it.
removeClass | Works like Element.addClass, but removes the class from the element.
toggleClass | Adds or removes the passed in class name to the element, depending on if it’s present or not.
setStyle | Sets a css property to the Element.
setStyles | Applies a collection of styles to the Element.
setOpacity | Sets the opacity of the Element, and sets also visibility == “hidden” if opacity == 0, and visibility = “visible” if opacity > 0.
getStyle | Returns the style of the Element given the property passed in.
getStyles | Returns an object of styles of the Element for each argument passed in.
getPrevious | Returns the previousSibling of the Element, excluding text nodes.
getNext | Works as Element.getPrevious, but tries to find the nextSibling.
getFirst | Works as Element.getPrevious, but tries to find the firstChild.
getLast | Works as Element.getPrevious, but tries to find the lastChild.
getParent | returns the $(element.parentNode)
getChildren | returns all the $(element.childNodes), excluding text nodes.
hasChild | returns true if the passed in element is a child of the $(element).
getProperty | Gets the an attribute of the Element.
removeProperty | Removes an attribute from the Element
getProperties | same as Element.getStyles, but for properties
setProperty | Sets an attribute for the Element.
setProperties | Sets numerous attributes for the Element.
setHTML | Sets the innerHTML of the Element.
getTag | Returns the tagName of the element in lower case.
empty | Empties an element of all its children.

Properties

set

you can set events, styles and properties with this shortcut. same as calling new Element.

injectBefore

Inserts the Element before the passed element.

Arguments

el an element reference or the id of the element to be injected in.

Example

html:
<div id="myElement"></div>
<div id="mySecondElement"></div>
js:
$('mySecondElement').injectBefore('myElement');
resulting html:
<div id="mySecondElement"></div>
<div id="myElement"></div>

injectAfter

Same as Element.injectBefore, but inserts the element after.

injectInside

Same as Element.injectBefore, but inserts the element inside.

injectTop

Same as Element.injectInside, but inserts the element inside, at the top.

adopt

Inserts the passed elements inside the Element.

Arguments

accepts elements references, element ids as string, selectors ($$(‘stuff’)) / array of elements, array of ids as strings and collections.

remove

Removes the Element from the DOM.

Example

$('myElement').remove() //bye bye

clone

Clones the Element and returns the cloned one.

Arguments

contents boolean, when true the Element is cloned with childNodes, default true

Returns

the cloned element

Example

var clone = $('myElement').clone().injectAfter('myElement');
//clones the Element and append the clone after the Element.

replaceWith

Replaces the Element with an element passed.

Arguments

el a string representing the element to be injected in (myElementId, or div), or an element reference. If you pass div or another tag, the element will be created.

Returns

the passed in element

Example

$('myOldElement').replaceWith($('myNewElement'));//$('myOldElement') is gone, and $('myNewElement') is in its place.

appendText

Appends text node to a DOM element.

Arguments

text the text to append.

Example

<div id="myElement">hey</div>
$('myElement').appendText(' howdy'); //myElement innerHTML is now"hey howdy"

hasClass

Tests the Element to see if it has the passed in className.

Returns

true | the Element has the class
false | it doesn’t

Arguments

className string; the class name to test.

Example

<div id="myElement" class="testClass"></div>
$('myElement').hasClass('testClass'); //returns true

addClass

Adds the passed in class to the Element, if the element doesnt already have it.

Arguments

className string; the class name to add

Example

<div id="myElement" class="testClass"></div>
$('myElement').addClass('newClass'); //<div id="myElement"class="testClass newClass"></div>

removeClass

Works like Element.addClass, but removes the class from the element.

toggleClass

Adds or removes the passed in class name to the element, depending on if it’s present or not.

Arguments

className the class to add or remove

Example

<div id="myElement" class="myClass"></div>
$('myElement').toggleClass('myClass');
<div id="myElement" class=""></div>
$('myElement').toggleClass('myClass');
<div id="myElement" class="myClass"></div>

setStyle

Sets a css property to the Element.

Arguments

property | the property to set
value | the value to which to set it; for numeric values that require “px” you can pass an integer

Example

$('myElement').setStyle('width', '300px'); //the width is now 300px
$('myElement').setStyle('width', 300); //the width is now 300px

setStyles

Applies a collection of styles to the Element.

Arguments

source an object or string containing all the styles to apply. When its a string it overrides old style.

Examples

$('myElement').setStyles({
   border: '1px solid #000',
   width: 300,
   height: 400
});

OR

$('myElement').setStyles('border: 1px solid #000; width: 300px;height: 400px;');

setOpacity

Sets the opacity of the Element, and sets also visibility == “hidden” if opacity == 0, and visibility = “visible” if opacity > 0.

Arguments

opacity float; Accepts values from 0 to 1.

Example

$('myElement').setOpacity(0.5) //make it 50% transparent

getStyle

Returns the style of the Element given the property passed in.

Arguments

property the css style property you want to retrieve

Example

$('myElement').getStyle('width'); //returns "400px"
//but you can also use
$('myElement').getStyle('width').toInt(); //returns 400

Returns

the style as a string

getStyles

Returns an object of styles of the Element for each argument passed in. Arguments: properties - strings; any number of style properties Example:

$('myElement').getStyles('width','height','padding');
//returns an object like:
{width: "10px", height: "10px", padding: "10px 0px 10px 0px"}

getPrevious

Returns the previousSibling of the Element, excluding text nodes.

Example

$('myElement').getPrevious(); //get the previous DOM element frommyElement

Returns

the sibling element or undefined if none found.

getNext

Works as Element.getPrevious, but tries to find the nextSibling.

getFirst

Works as Element.getPrevious, but tries to find the firstChild.

getLast

Works as Element.getPrevious, but tries to find the lastChild.

getParent

returns the $(element.parentNode)

getChildren

returns all the $(element.childNodes), excluding text nodes. Returns as Elements.

hasChild

returns true if the passed in element is a child of the $(element).

getProperty

Gets the an attribute of the Element.

Arguments

property string; the attribute to retrieve

Example

$('myImage').getProperty('src') // returns whatever.gif

Returns

the value, or an empty string

removeProperty

Removes an attribute from the Element

Arguments

property string; the attribute to remove

getProperties

same as Element.getStyles, but for properties

setProperty

Sets an attribute for the Element.

Arguments

property | string; the property to assign the value passed in
value | the value to assign to the property passed in

Example

$('myImage').setProperty('src', 'whatever.gif'); //myImage nowpoints to whatever.gif for its source

setProperties

Sets numerous attributes for the Element.

Arguments

source an object with key/value pairs.

Example

$('myElement').setProperties({
    src: 'whatever.gif',
    alt: 'whatever dude'
});
<img src="whatever.gif" alt="whatever dude">

setHTML

Sets the innerHTML of the Element.

Arguments

html string; the new innerHTML for the element.

Example

$('myElement').setHTML(newHTML) //the innerHTML of myElement is now= newHTML

getTag

Returns the tagName of the element in lower case.

Example

$('myImage').getTag() // returns 'img'

Returns

The tag name in lower case

empty

Empties an element of all its children.

Example

$('myDiv').empty() // empties the Div and returns it

Returns

The element.


mootools docs - Element-Selectors

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Element. Selectors.js

Css Query related functions and Element extensions

License

MIT-style license.

Summary
Element. Selectors.js | Css Query related functions and Element extensions
Utility Functions |
Functions |
$E | Selects a single (i.e.
$ES | Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter.
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
getElements | Gets all the elements within an element that match the given (single) selector.
getElement | Same as Element.getElements, but returns only the first.
getElementsBySelector | Same as Element.getElements, but allows for comma separated selectors, as in css.
getElementsByClassName | Returns all the elements that match a specific class name.
getElementById | Targets an element with the specified id found inside the Element.

Utility Functions

Summary
Functions |
$E | Selects a single (i.e.
$ES | Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter.

Functions

$E

Selects a single (i.e. the first found) Element based on the selector passed in and an optional filter element. Returns as Element.

Arguments

selector | string; the css selector to match
filter | optional; a DOM element to limit the scope of the selector match; defaults to document.

Example

$E('a', 'myElement') //find the first anchor tag inside the DOMelement with id 'myElement'

Returns

a DOM element the first element that matches the selector

$ES

Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter. See Also: Element.getElements for an alternate syntax. Returns as Elements.

Returns

an array of dom elements that match the selector within the filter

Arguments

selector | string; css selector to match
filter | optional; a DOM element to limit the scope of the selector match; defaults to document.

Examples

$ES("a") //gets all the anchor tags; synonymous with $$("a")
$ES('a','myElement') //get all the anchor tags within$('myElement')

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
getElements | Gets all the elements within an element that match the given (single) selector.
getElement | Same as Element.getElements, but returns only the first.
getElementsBySelector | Same as Element.getElements, but allows for comma separated selectors, as in css.
getElementsByClassName | Returns all the elements that match a specific class name.
getElementById | Targets an element with the specified id found inside the Element.

Properties

getElements

Gets all the elements within an element that match the given (single) selector. Returns as Elements.

Arguments

selector string; the css selector to match

Examples

$('myElement').getElements('a'); // get all anchors withinmyElement
$('myElement').getElements('input[name=dialog]') //get all inputtags with name 'dialog'
$('myElement').getElements('input[name$=log]') //get all input tagswith names ending with 'log'

Notes

Supports these operators in attribute selectors:

  • = : is equal to
  • ^= : starts-with
  • $= : ends-with
  • != : is not equal to

Xpath is used automatically for compliant browsers.

getElement

Same as Element.getElements, but returns only the first. Alternate syntax for $E, where filter is the Element. Returns as Element.

Arguments

selector string; css selector

getElementsBySelector

Same as Element.getElements, but allows for comma separated selectors, as in css. Alternate syntax for $$, where filter is the Element. Returns as Elements.

Arguments

selector string; css selector

getElementsByClassName

Returns all the elements that match a specific class name. Here for compatibility purposes. can also be written: document.getElements(‘.className’), or $$(‘.className’) Returns as Elements.

Arguments

className string; css classname

getElementById

Targets an element with the specified id found inside the Element. Does not overwrite document.getElementById.

Arguments

id string; the id of the element to find.


mootools docs - Element-Filters

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Element. Filters.js

add Filters capability to Elements.

License

MIT-style license.

Summary
Element. Filters.js | add Filters capability to Elements.
Elements | A collection of methods to be used with $$ elements collections.
Properties |
filterByTag | Filters the collection by a specified tag name.
filterByClass | Filters the collection by a specified class name.
filterById | Filters the collection by a specified ID.
filterByAttribute | Filters the collection by a specified attribute.

Elements

A collection of methods to be used with $$ elements collections.

Summary
Properties |
filterByTag | Filters the collection by a specified tag name.
filterByClass | Filters the collection by a specified class name.
filterById | Filters the collection by a specified ID.
filterByAttribute | Filters the collection by a specified attribute.

Properties

filterByTag

Filters the collection by a specified tag name. Returns a new Elements collection, while the original remains untouched.

filterByClass

Filters the collection by a specified class name. Returns a new Elements collection, while the original remains untouched.

filterById

Filters the collection by a specified ID. Returns a new Elements collection, while the original remains untouched.

filterByAttribute

Filters the collection by a specified attribute. Returns a new Elements collection, while the original remains untouched.

Arguments

name | the attribute name.
operator | optional, the attribute operator.
value | optional, the attribute value, only valid if the operator is specified.


mootools docs - Element-Form

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Element. Form.js

Contains Element prototypes to deal with Forms and their elements.

License

MIT-style license.

Summary
Element. Form.js | Contains Element prototypes to deal with Forms and their elements.
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
getValue | Returns the value of the Element, if its tag is textarea, select or input.
toQueryString | Reads the children inputs of the Element and generates a query string, based on their values.

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
getValue | Returns the value of the Element, if its tag is textarea, select or input.
toQueryString | Reads the children inputs of the Element and generates a query string, based on their values.

Properties

getValue

Returns the value of the Element, if its tag is textarea, select or input. getValue called on a multiple select will return an array.

toQueryString

Reads the children inputs of the Element and generates a query string, based on their values. Used internally in Ajax

Example

<form id="myForm" action="submit.php">
<input name="email" value="bob_40bob.com">
<input name="zipCode" value="90210">
</form>

<script>
 $('myForm').toQueryString()
</script>

Returns

email=b.nosp@m.ob@bob.nosp@m..com&zipCode=90210


mootools docs - Element-Event

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Element. Event.js

Contains the Event Class, Element methods to deal with Element events, custom Events, and the Function prototype bindWithEvent.

License

MIT-style license.

Summary
Element. Event.js | Contains the Event Class, Element methods to deal with Element events, custom Events, and the Function prototype bindWithEvent.
Event | Cross browser methods to manage events.
Properties |
stop | cross browser method to stop an event
stopPropagation | cross browser method to stop the propagation of an event
preventDefault | cross browser method to prevent the default action of the event
keys |
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
addEvent | Attaches an event listener to a DOM element.
removeEvent | Works as Element.addEvent, but instead removes the previously added event listener.
addEvents | As addEvent, but accepts an object and add multiple events at once.
removeEvents | removes all events of a certain type from an element.
fireEvent | executes all events of the specified type present in the element.
cloneEvents | Clones all events from an element to this element.
Custom Events |
Events |
mouseenter | In addition to the standard javascript events (load, mouseover, mouseout, click, etc.)
mouseleave | this event fires when the mouse exits the area of the dom element; will not be fired again if the mouse crosses over children of the element (unlike mouseout)
Function | A collection of The Function Object prototype methods.
Properties |
bindWithEvent | automatically passes mootools Event Class.

Event

Cross browser methods to manage events.

Arguments

event the event

Properties

shift | true if the user pressed the shift
control | true if the user pressed the control
alt | true if the user pressed the alt
meta | true if the user pressed the meta key
wheel | the amount of third button scrolling
code | the keycode of the key pressed
page.x | the x position of the mouse, relative to the full window
page.y | the y position of the mouse, relative to the full window
client.x | the x position of the mouse, relative to the viewport
client.y | the y position of the mouse, relative to the viewport
key | the key pressed as a lowercase string. key also returns ‘enter’, ‘up’, ‘down’, ‘left’, ‘right’, ‘space’, ‘backspace’, ‘delete’, ‘esc’. Handy for these special keys.
target | the event target
relatedTarget | the event related target

Example

$('myLink').onkeydown = function(event){
    var event = new Event(event);
    //event is now the Event class.
    alert(event.key); //returns the lowercase letter pressed
    alert(event.shift); //returns true if the key pressed is shift
    if (event.key == 's' && event.control) alert('documentsaved');
};
Summary
Properties |
stop | cross browser method to stop an event
stopPropagation | cross browser method to stop the propagation of an event
preventDefault | cross browser method to prevent the default action of the event
keys |

Properties

stop

cross browser method to stop an event

stopPropagation

cross browser method to stop the propagation of an event

preventDefault

cross browser method to prevent the default action of the event

keys

you can add additional Event keys codes this way

Example

Event.keys.whatever = 80;
$(myelement).addEvent(keydown, function(event){
    event = new Event(event);
    if (event.key == 'whatever') console.log(whatever key clicked).
});

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
addEvent | Attaches an event listener to a DOM element.
removeEvent | Works as Element.addEvent, but instead removes the previously added event listener.
addEvents | As addEvent, but accepts an object and add multiple events at once.
removeEvents | removes all events of a certain type from an element.
fireEvent | executes all events of the specified type present in the element.
cloneEvents | Clones all events from an element to this element.

Properties

addEvent

Attaches an event listener to a DOM element.

Arguments

type | the event to monitor (‘click’, ‘load’, etc) without the prefix ‘on’.
fn | the function to execute

Example

$('myElement').addEvent('click', function(){alert('clicked!')});

removeEvent

Works as Element.addEvent, but instead removes the previously added event listener.

addEvents

As addEvent, but accepts an object and add multiple events at once.

removeEvents

removes all events of a certain type from an element. if no argument is passed in, removes all events.

Arguments

type string; the event name (e.g. ‘click’)

fireEvent

executes all events of the specified type present in the element.

Arguments

type | string; the event name (e.g. ‘click’)
args | array or single object; arguments to pass to the function; if more than one argument, must be an array
delay | (integer) delay (in ms) to wait to execute the event

cloneEvents

Clones all events from an element to this element.

Arguments

from | element, copy all events from this element
type | optional, copies only events of this type

Custom Events

Summary
Events |
mouseenter | In addition to the standard javascript events (load, mouseover, mouseout, click, etc.)
mouseleave | this event fires when the mouse exits the area of the dom element; will not be fired again if the mouse crosses over children of the element (unlike mouseout)

Events

mouseenter

In addition to the standard javascript events (load, mouseover, mouseout, click, etc.) <Event.js> contains two custom events this event fires when the mouse enters the area of the dom element; will not be fired again if the mouse crosses over children of the element (unlike mouseover)

Example

$(myElement).addEvent('mouseenter', myFunction);

mouseleave

this event fires when the mouse exits the area of the dom element; will not be fired again if the mouse crosses over children of the element (unlike mouseout)

Example

$(myElement).addEvent('mouseleave', myFunction);

Function

A collection of The Function Object prototype methods.

Summary
Properties |
bindWithEvent | automatically passes mootools Event Class.

Properties

bindWithEvent

automatically passes mootools Event Class.

Arguments

bind | optional, the object that the “this” of the function will refer to.
args | optional, an argument to pass to the function; if more than one argument, it must be an array of arguments.

Returns

a function with the parameter bind as its “this” and as a pre-passed argument event or window.event, depending on the browser.

Example

function myFunction(event){
   alert(event.client.x) //returns the coordinates of the mouse..
};
myElement.onclick = myFunction.bindWithEvent(myElement);


mootools docs - Element-Dimensions

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Element. Dimensions.js

Contains Element prototypes to deal with Element size and position in space.

Note

The functions in this script require n XHTML doctype.

License

MIT-style license.

Summary
Element. Dimensions.js | Contains Element prototypes to deal with Element size and position in space.
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
scrollTo | Scrolls the element to the specified coordinated (if the element has an overflow)
getSize | Return an Object representing the size/scroll values of the element.
getPosition | Returns the real offsets of the element.
getTop | Returns the distance from the top of the window to the Element.
getLeft | Returns the distance from the left of the window to the Element.
getCoordinates | Returns an object with width, height, left, right, top, and bottom, representing the values of the Element

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
scrollTo | Scrolls the element to the specified coordinated (if the element has an overflow)
getSize | Return an Object representing the size/scroll values of the element.
getPosition | Returns the real offsets of the element.
getTop | Returns the distance from the top of the window to the Element.
getLeft | Returns the distance from the left of the window to the Element.
getCoordinates | Returns an object with width, height, left, right, top, and bottom, representing the values of the Element

Properties

scrollTo

Scrolls the element to the specified coordinated (if the element has an overflow)

Arguments

x | the x coordinate
y | the y coordinate

Example

$('myElement').scrollTo(0, 100)

getSize

Return an Object representing the size/scroll values of the element.

Example

$('myElement').getSize();

Returns

{
    'scroll': {'x': 100, 'y': 100},
    'size': {'x': 200, 'y': 400},
    'scrollSize': {'x': 300, 'y': 500}
}

getPosition

Returns the real offsets of the element.

Arguments

overflown optional, an array of nested scrolling containers for scroll offset calculation, use this if your element is inside any element containing scrollbars

Example

$('element').getPosition();

Returns

{x: 100, y:500};

getTop

Returns the distance from the top of the window to the Element.

Arguments

overflown optional, an array of nested scrolling containers, see Element::getPosition

getLeft

Returns the distance from the left of the window to the Element.

Arguments

overflown optional, an array of nested scrolling containers, see Element::getPosition

getCoordinates

Returns an object with width, height, left, right, top, and bottom, representing the values of the Element

Arguments

overflown optional, an array of nested scrolling containers, see Element::getPosition

Example

var myValues = $('myElement').getCoordinates();

Returns

{
    width: 200,
    height: 300,
    left: 100,
    top: 50,
    right: 300,
    bottom: 350
}


mootools docs - Window-DomReady

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Window. DomReady.js

Contains the custom event domready, for window.

License

MIT-style license.

Summary
Window. DomReady.js | Contains the custom event domready, for window.
Custom Events |
Events |
domready | executes a function when the dom tree is loaded, without waiting for images.

Custom Events

Summary
Events |
domready | executes a function when the dom tree is loaded, without waiting for images.

Events

domready

executes a function when the dom tree is loaded, without waiting for images. Only works when called from window.

Credits

© Dean Edwards/Matthias Miller/John Resig, remastered for mootools.

Arguments

fn the function to execute when the DOM is ready

Example

window.addEvent('domready', function(){
  alert('the dom is ready');
});


mootools docs - Window-Size

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Window. Size.js

Window cross-browser dimensions methods.

Note

The Functions in this script require an XHTML doctype.

License

MIT-style license.

Summary
Window. Size.js | Window cross-browser dimensions methods.
window | Cross browser methods to get various window dimensions.
Properties |
getWidth | Returns an integer representing the width of the browser window (without the scrollbar).
getHeight | Returns an integer representing the height of the browser window (without the scrollbar).
getScrollWidth | Returns an integer representing the scrollWidth of the window.
getScrollHeight | Returns an integer representing the scrollHeight of the window.
getScrollLeft | Returns an integer representing the scrollLeft of the window (the number of pixels the window has scrolled from the left).
getScrollTop | Returns an integer representing the scrollTop of the window (the number of pixels the window has scrolled from the top).
getSize | Same as Element.getSize

window

Cross browser methods to get various window dimensions. Warning: All these methods require that the browser operates in strict mode, not quirks mode.

Summary
Properties |
getWidth | Returns an integer representing the width of the browser window (without the scrollbar).
getHeight | Returns an integer representing the height of the browser window (without the scrollbar).
getScrollWidth | Returns an integer representing the scrollWidth of the window.
getScrollHeight | Returns an integer representing the scrollHeight of the window.
getScrollLeft | Returns an integer representing the scrollLeft of the window (the number of pixels the window has scrolled from the left).
getScrollTop | Returns an integer representing the scrollTop of the window (the number of pixels the window has scrolled from the top).
getSize | Same as Element.getSize

Properties

getWidth

Returns an integer representing the width of the browser window (without the scrollbar).

getHeight

Returns an integer representing the height of the browser window (without the scrollbar).

getScrollWidth

Returns an integer representing the scrollWidth of the window. This value is equal to or bigger than getWidth.

See Also

http://developer.mozilla.org/default.htm- /en- /docs- /DOM:element.scrollWidth

getScrollHeight

Returns an integer representing the scrollHeight of the window. This value is equal to or bigger than getHeight.

See Also

http://developer.mozilla.org/default.htm- /en- /docs- /DOM:element.scrollHeight

getScrollLeft

Returns an integer representing the scrollLeft of the window (the number of pixels the window has scrolled from the left).

See Also

http://developer.mozilla.org/default.htm- /en- /docs- /DOM:element.scrollLeft

getScrollTop

Returns an integer representing the scrollTop of the window (the number of pixels the window has scrolled from the top).

See Also

http://developer.mozilla.org/default.htm- /en- /docs- /DOM:element.scrollTop

getSize

Same as Element.getSize


mootools docs - XHR

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

XHR.js

Contains the basic XMLHttpRequest Class Wrapper.

License

MIT-style license.

Summary
XHR.js | Contains the basic XMLHttpRequest Class Wrapper.
XHR | Basic XMLHttpRequest Wrapper.
Properties |
setHeader | Add/modify an header for the request.
send | Opens the XHR connection and sends the data.
cancel | Cancels the running request.

XHR

Basic XMLHttpRequest Wrapper.

Arguments

options an object with options names as keys. See options below.

Options

method | ’post’ or ‘get’ - the protocol for the request; optional, defaults to ‘post’.
async | boolean: asynchronous option; true uses asynchronous requests. Defaults to true.
onRequest | function to execute when the XHR request is fired.
onSuccess | function to execute when the XHR request completes.
onStateChange | function to execute when the state of the XMLHttpRequest changes.
onFailure | function to execute when the state of the XMLHttpRequest changes.
encoding | the encoding, defaults to utf-8.
autoCancel | cancels the already running request if another one is sent. defaults to false.
headers | accepts an object, that will be set to request headers.

Properties

running | true if the request is running.
response | object, text and xml as keys. You can access this property in the onSuccess event.

Example

var myXHR = new XHR({method:'get'}).send('../site.com/requestHandler.php','name=john&lastname=dorian');
Summary
Properties |
setHeader | Add/modify an header for the request.
send | Opens the XHR connection and sends the data.
cancel | Cancels the running request.

Properties

setHeader

Add/modify an header for the request. It will not override headers from the options.

Example

var myAjax = new Ajax(url, {method: 'get', headers: {'X-Request':'JSON'}});
myAjax.setHeader('Last-Modified','Sat, 1 Jan 2005 05:00:00 GMT');

send

Opens the XHR connection and sends the data. Data has to be null or a string.

Example

var myXhr = new XHR({method: 'post'});
myXhr.send(url, querystring);

var syncXhr = new XHR({async: false, method: 'post'});
syncXhr.send(url, null);

cancel

Cancels the running request. No effect if the request is not running.

Example

var myXhr = new XHR({method: 'get'}).send(url);
myXhr.cancel();


mootools docs - Ajax

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Ajax.js

Contains the Ajax class. Also contains methods to generate querystings from forms and Objects.

Credits

Loosely based on the version from prototype.js http://prototype.conio.net

License

MIT-style license.

Summary
Ajax.js | Contains the Ajax class.
Ajax | An Ajax class, For all your asynchronous needs.
Properties |
request | Executes the ajax request.
evalScripts | Executes scripts in the response text
getHeader | Returns the given response header or null
Object related Functions |
Functions |
Object. toQueryString | Generates a querystring from key/pair values in an object
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
send | Sends a form with an ajax post request

Ajax

An Ajax class, For all your asynchronous needs. Inherits methods, properties and options from XHR.

Arguments

url | the url pointing to the server-side script.
options | optional, an object containing options.

Options

data | you can write parameters here. Can be a querystring, an object or a Form element.
onComplete | function to execute when the ajax request completes.
update | $(element) to insert the response text of the XHR into, upon completion of the request.
evalScripts | boolean; default is false. Execute scripts in the response text onComplete. When the response is javascript the whole response is evaluated.
evalResponse | boolean; default is false. Force global evalulation of the whole response, no matter what content-type it is.

Example

var myAjax = new Ajax(url, {method: 'get'}).request();
Summary
Properties |
request | Executes the ajax request.
evalScripts | Executes scripts in the response text
getHeader | Returns the given response header or null

Properties

request

Executes the ajax request.

Example

var myAjax = new Ajax(url, {method: 'get'});
myAjax.request();

OR

new Ajax(url, {method: 'get'}).request();

evalScripts

Executes scripts in the response text

getHeader

Returns the given response header or null

Object related Functions

Summary
Functions |
Object. toQueryString | Generates a querystring from key/pair values in an object

Functions

Object. toQueryString

Generates a querystring from key/pair values in an object

Arguments

source the object to generate the querystring from.

Returns

the query string.

Example

Object.toQueryString({apple: "red", lemon: "yellow"}); //returns"apple=red&lemon=yellow"

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
send | Sends a form with an ajax post request

Properties

send

Sends a form with an ajax post request

Arguments

options option collection for ajax request. See Ajax for the options list.

Returns

The Ajax Class Instance

Example

<form id="myForm" action="submit.php">
<input name="email" value="bob_40bob.com">
<input name="zipCode" value="90210">
</form>
<script>
$('myForm').send()
</script>


mootools docs - Assets

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Assets.js

provides dynamic loading for images, css and javascript files.

License

MIT-style license.

Summary
Assets.js | provides dynamic loading for images, css and javascript files.
Properties |
javascript | Injects a javascript file in the page.
css | Injects a css file in the page.
image | Preloads an image and returns the img element.
images | Preloads an array of images (as strings) and returns an array of img elements.

Properties

javascript

Injects a javascript file in the page.

Arguments

source | the path of the javascript file
properties | some additional attributes you might want to add to the script element

Example

new Asset.javascript('scripts/myScript.js', {id: 'myScript'});

css

Injects a css file in the page.

Arguments

source | the path of the css file
properties | some additional attributes you might want to add to the link element

Example

new Asset.css('css/myStyle.css', {id: 'myStyle', title:'myStyle'});

image

Preloads an image and returns the img element. does not inject it to the page.

Arguments

source | the path of the image file
properties | some additional attributes you might want to add to the img element

Example

new Asset.image('images/myImage.png', {id: 'myImage', title:'myImage', onload: myFunction});

Returns

the img element. you can inject it anywhere you want with Element.injectInside/Element.injectAfter/Element.injectBefore

images

Preloads an array of images (as strings) and returns an array of img elements. does not inject them to the page.

Arguments

sources | array, the paths of the image files
options | object, see below

Options

onComplete | a function to execute when all image files are loaded in the browser’s cache
onProgress | a function to execute when one image file is loaded in the browser’s cache

Example

new Asset.images(['images/myImage.png', 'images/myImage2.gif'], {
    onComplete: function(){
    alert('all images loaded!');
    }
});

Returns

the img elements as $$. you can inject them anywhere you want with Element.injectInside/Element.injectAfter/Element.injectBefore


mootools docs - Cookie

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Cookie.js

A cookie reader/creator

Credits

based on the functions by Peter-Paul Koch (http://quirksmode.org)

Summary
Cookie.js | A cookie reader/creator
Cookie | Class for creating, getting, and removing cookies.
Properties |
set | Sets a cookie in the browser.
get | Gets the value of a cookie.
remove | Removes a cookie from the browser.

Cookie

Class for creating, getting, and removing cookies.

Summary
Properties |
set | Sets a cookie in the browser.
get | Gets the value of a cookie.
remove | Removes a cookie from the browser.

Properties

set

Sets a cookie in the browser.

Arguments

key | the key (name) for the cookie
value | the value to set, cannot contain semicolons
options | an object representing the Cookie options. See Options below. Default values are stored in Cookie.options.

Options

domain | the domain the Cookie belongs to. If you want to share the cookie with pages located on a different domain, you have to set this value. Defaults to the current domain.
path | the path the Cookie belongs to. If you want to share the cookie with pages located in a different path, you have to set this value, for example to “/” to share the cookie with all pages on the domain. Defaults to the current path.
duration | the duration of the Cookie before it expires, in days. If set to false or 0, the cookie will be a session cookie that expires when the browser is closed. This is default.
secure | Stored cookie information can be accessed only from a secure environment.

Returns

An object with the options, the key and the value. You can give it as first parameter to Cookie.remove.

Example

Cookie.set("username", "Harald", {duration: 1}); //save this for 1day
Cookie.set("username", "JackBauer", {duration: false}); //sessioncookie

get

Gets the value of a cookie.

Arguments

key the name of the cookie you wish to retrieve.

Returns

The cookie string value, or false if not found.

Example

Cookie.get("username") //returns Aaron

remove

Removes a cookie from the browser.

Arguments

cookie | the name of the cookie to remove or a previous cookie (for domains)
options | optional. you can also pass the domain and path here. Same as options in Cookie.set

Examples

Cookie.remove("username") //bye-bye Aaron
var myCookie = Cookie.set('user', 'jackbauer', {domain:'mootools.net'});
Cookie.remove(myCookie);


mootools docs - Json

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Json.js

Simple Json parser and Stringyfier, See: http://www.json.org

License

MIT-style license.

Summary
Json.js | Simple Json parser and Stringyfier, See: http://www.json.org/default.htm
Json | Simple Json parser and Stringyfier, See: http://www.json.org/default.htm
Properties |
toString | Converts an object to a string, to be passed in server-side scripts as a parameter.
evaluate | converts a json string to an javascript Object.

Json

Simple Json parser and Stringyfier, See: http://www.json.org

Summary
Properties |
toString | Converts an object to a string, to be passed in server-side scripts as a parameter.
evaluate | converts a json string to an javascript Object.

Properties

toString

Converts an object to a string, to be passed in server-side scripts as a parameter. Although its not normal usage for this class, this method can also be used to convert functions and arrays to strings.

Arguments

obj the object to convert to string

Returns

A json string

Example

Json.toString({apple: 'red', lemon: 'yellow'});'{"apple":"red","lemon":"yellow"}'

evaluate

converts a json string to an javascript Object.

Arguments

str | the string to evaluate. if its not a string, it returns false.
secure | optionally, performs syntax check on json string. Defaults to false.

Credits

Json test regexp is by Douglas Crockford http://crockford.org.

Example

var myObject = Json.evaluate('{"apple":"red","lemon":"yellow"}');
//myObject will become {apple: 'red', lemon: 'yellow'}


mootools docs - Json-Remote

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Json. Remote.js

Contains Json.Remote.

License

MIT-style license.

Summary
Json. Remote.js | Contains Json.Remote.
Json. Remote | Wrapped XHR with automated sending and receiving of Javascript Objects in Json Format.

Json. Remote

Wrapped XHR with automated sending and receiving of Javascript Objects in Json Format.

Arguments

url | the url you want to send your object to.
options | see XHR options

Example

this code will send user information based on name/last name

var jSonRequest = new Json.Remote("../site.com/tellMeAge.php",{onComplete: function(person){
    alert(person.age); //is 25 years
    alert(person.height); //is 170 cm
    alert(person.weight); //is 120 kg
}}).send({'name': 'John', 'lastName': 'Doe'});


mootools docs - Fx-Base

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Fx. Base.js

Contains Fx.Base and two Transitions.

License

MIT-style license.

Summary
Fx. Base.js | Contains Fx.Base and two Transitions.
Fx.Base | Base class for the Mootools Effects (Moo.Fx) library.
Properties |
set | Immediately sets the value with no transition.
start | Executes an effect from one position to the other.
stop | Stops the transition.

Fx.Base

Base class for the Mootools Effects (Moo.Fx) library.

Options

onStart | the function to execute as the effect begins; nothing (Class.empty) by default.
onComplete | the function to execute after the effect has processed; nothing (Class.empty) by default.
transition | the equation to use for the effect see Fx.Transitions; default is <Fx.Transitions.Sine.easeInOut>
duration | the duration of the effect in ms; 500 is the default.
unit | the unit is ‘px’ by default (other values include things like ‘em’ for fonts or ‘%’).
wait | boolean: to wait or not to wait for a current transition to end before running another of the same instance. defaults to true.
fps | the frames per second for the transition; default is 30
Summary
Properties |
set | Immediately sets the value with no transition.
start | Executes an effect from one position to the other.
stop | Stops the transition.

Properties

set

Immediately sets the value with no transition.

Arguments

to the point to jump to

Example

var myFx = new Fx.Style('myElement', 'opacity').set(0); //will makeit immediately transparent

start

Executes an effect from one position to the other.

Arguments

from | integer: staring value
to | integer: the ending value

Examples

var myFx = new Fx.Style('myElement', 'opacity').start(0,1);//display a transition from transparent to opaque.

stop

Stops the transition.


mootools docs - Fx-CSS

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Fx. CSS.js

Css parsing class for effects. Required by Fx.Style, Fx.Styles, Fx.Elements. No documentation needed, as its used internally.

License

MIT-style license.


mootools docs - Fx-Style

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Fx. Style.js

Contains Fx.Style

License

MIT-style license.

Summary
Fx. Style.js | Contains Fx.Style
Fx. Style | The Style effect; Extends Fx.Base, inherits all its properties.
Properties |
hide | Same as Fx.Base.set (0); hides the element immediately without transition.
set | Sets the element’s css property (specified at instantiation) to the specified value immediately.
start | Displays the transition to the value/values passed in
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
effect | Applies an Fx.Style to the Element; This a shortcut for Fx.Style.

Fx. Style

The Style effect; Extends Fx.Base, inherits all its properties. Used to transition any css property from one value to another. Includes colors. Colors must be in hex format.

Arguments

el | the $(element) to apply the style transition to
property | the property to transition
options | the Fx.Base options (see: Fx.Base)

Example

var marginChange = new Fx.Style('myElement', 'margin-top',{duration:500});
marginChange.start(10, 100);
Summary
Properties |
hide | Same as Fx.Base.set (0); hides the element immediately without transition.
set | Sets the element’s css property (specified at instantiation) to the specified value immediately.
start | Displays the transition to the value/values passed in

Properties

hide

Same as Fx.Base.set (0); hides the element immediately without transition.

set

Sets the element’s css property (specified at instantiation) to the specified value immediately.

Example

var marginChange = new Fx.Style('myElement', 'margin-top',{duration:500});
marginChange.set(10); //margin-top is set to 10px immediately

start

Displays the transition to the value/values passed in

Arguments

from | (integer; optional) the starting position for the transition
to | (integer) the ending position for the transition

Note

If you provide only one argument, the transition will use the current css value for its starting value.

Example

var marginChange = new Fx.Style('myElement', 'margin-top',{duration:500});
marginChange.start(10); //tries to read current margin top valueand goes from current to 10

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
effect | Applies an Fx.Style to the Element; This a shortcut for Fx.Style.

Properties

effect

Applies an Fx.Style to the Element; This a shortcut for Fx.Style.

Arguments

property | (string) the css property to alter
options | (object; optional) key/value set of options (see <Fx.Style>)

Example

var myEffect = $('myElement').effect('height', {duration: 1000,transition: Fx.Transitions.linear});
myEffect.start(10, 100);
//OR
$('myElement').effect('height', {duration: 1000, transition:Fx.Transitions.linear}).start(10,100);


mootools docs - Fx-Styles

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Fx. Styles.js

Contains Fx.Styles

License

MIT-style license.

Summary
Fx. Styles.js | Contains Fx.Styles
Fx. Styles | Allows you to animate multiple css properties at once; Extends Fx.Base, inherits all its properties.
Properties |
start | Executes a transition for any number of css properties in tandem.
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
effects | Applies an Fx.Styles to the Element; This a shortcut for Fx.Styles.

Fx. Styles

Allows you to animate multiple css properties at once; Extends Fx.Base, inherits all its properties. Includes colors. Colors must be in hex format.

Arguments

el | the $(element) to apply the styles transition to
options | the fx options (see: Fx.Base)

Example

var myEffects = new Fx.Styles('myElement', {duration: 1000,transition: Fx.Transitions.linear});

//height from 10 to 100 and width from 900 to 300
myEffects.start({
    'height': [10, 100],
    'width': [900, 300]
});

//or height from current height to 100 and width from current widthto 300
myEffects.start({
    'height': 100,
    'width': 300
});
Summary
Properties |
start | Executes a transition for any number of css properties in tandem.

Properties

start

Executes a transition for any number of css properties in tandem.

Arguments

obj an object containing keys that specify css properties to alter and values that specify either the from/to values (as an array) or just the end value (an integer).

Example

see Fx.Styles

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
effects | Applies an Fx.Styles to the Element; This a shortcut for Fx.Styles.

Properties

effects

Applies an Fx.Styles to the Element; This a shortcut for Fx.Styles.

Example

var myEffects = $(myElement).effects({duration: 1000, transition:Fx.Transitions.Sine.easeInOut});
myEffects.start({'height': [10, 100], 'width': [900, 300]});


mootools docs - Fx-Elements

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Fx. Elements.js

Contains Fx.Elements

License

MIT-style license.

Summary
Fx. Elements.js | Contains Fx.Elements
Fx. Elements | Fx.Elements allows you to apply any number of styles transitions to a selection of elements.
Properties |
start | Applies the passed in style transitions to each object named (see example).

Fx. Elements

Fx.Elements allows you to apply any number of styles transitions to a selection of elements. Includes colors (must be in hex format).

Arguments

elements | a collection of elements the effects will be applied to.
options | same as Fx.Base options.
Summary
Properties |
start | Applies the passed in style transitions to each object named (see example).

Properties

start

Applies the passed in style transitions to each object named (see example). Each item in the collection is refered to as a numerical string (“1” for instance). The first item is “0”, the second “1”, etc.

Example

var myElementsEffects = new Fx.Elements($$('a'));
myElementsEffects.start({
    '0': { //let's change the first element's opacity and width
    'opacity': [0,1],
    'width': [100,200]
    },
    '4': { //and the fifth one's opacity
    'opacity': [0.2, 0.5]
    }
});


mootools docs - Fx-Scroll

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Fx. Scroll.js

Contains Fx.Scroll

License

MIT-style license.

Summary
Fx. Scroll.js | Contains Fx.Scroll
Fx. Scroll | Scroll any element with an overflow, including the window element.
Properties |
scrollTo | Scrolls the chosen element to the x/y coordinates.
toTop | Scrolls the chosen element to its maximum top.
toBottom | Scrolls the chosen element to its maximum bottom.
toLeft | Scrolls the chosen element to its maximum left.
toRight | Scrolls the chosen element to its maximum right.
toElement | Scrolls the specified element to the position the passed in element is found.

Fx. Scroll

Scroll any element with an overflow, including the window element.

Note

Fx.Scroll requires an XHTML doctype.

Arguments

element | the element to scroll
options | optional, see Options below.

Options

all the Fx.Base options, plus: offset - the distance for the scrollTo point/element. an Object with x/y properties. overflown - an array of nested scrolling containers, see Element.getPosition

Summary
Properties |
scrollTo | Scrolls the chosen element to the x/y coordinates.
toTop | Scrolls the chosen element to its maximum top.
toBottom | Scrolls the chosen element to its maximum bottom.
toLeft | Scrolls the chosen element to its maximum left.
toRight | Scrolls the chosen element to its maximum right.
toElement | Scrolls the specified element to the position the passed in element is found.

Properties

scrollTo

Scrolls the chosen element to the x/y coordinates.

Arguments

x | the x coordinate to scroll the element to
y | the y coordinate to scroll the element to

toTop

Scrolls the chosen element to its maximum top.

toBottom

Scrolls the chosen element to its maximum bottom.

toLeft

Scrolls the chosen element to its maximum left.

toRight

Scrolls the chosen element to its maximum right.

toElement

Scrolls the specified element to the position the passed in element is found.

Arguments

el the $(element) to scroll the window to


mootools docs - Fx-Slide

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Fx. Slide.js

Contains Fx.Slide

License

MIT-style license.

Summary
Fx. Slide.js | Contains Fx.Slide
Fx. Slide | The slide effect; slides an element in horizontally or vertically, the contents will fold inside.
Properties |
slideIn | Slides the elements in view horizontally or vertically.
slideOut | Sides the elements out of view horizontally or vertically.
hide | Hides the element without a transition.
show | Shows the element without a transition.
toggle | Slides in or Out the element, depending on its state

Fx. Slide

The slide effect; slides an element in horizontally or vertically, the contents will fold inside. Extends Fx.Base, inherits all its properties.

Note

Fx.Slide requires an XHTML doctype.

Options

mode | set it to vertical or horizontal. Defaults to vertical.
options | all the Fx.Base options

Example

var mySlider = new Fx.Slide('myElement', {duration: 500});
mySlider.toggle() //toggle the slider up and down.
Summary
Properties |
slideIn | Slides the elements in view horizontally or vertically.
slideOut | Sides the elements out of view horizontally or vertically.
hide | Hides the element without a transition.
show | Shows the element without a transition.
toggle | Slides in or Out the element, depending on its state

Properties

slideIn

Slides the elements in view horizontally or vertically.

Arguments

mode (optional, string) ‘horizontal’ or ‘vertical’; defaults to options.mode.

slideOut

Sides the elements out of view horizontally or vertically.

Arguments

mode (optional, string) ‘horizontal’ or ‘vertical’; defaults to options.mode.

hide

Hides the element without a transition.

Arguments

mode (optional, string) ‘horizontal’ or ‘vertical’; defaults to options.mode.

show

Shows the element without a transition.

Arguments

mode (optional, string) ‘horizontal’ or ‘vertical’; defaults to options.mode.

toggle

Slides in or Out the element, depending on its state

Arguments

mode (optional, string) ‘horizontal’ or ‘vertical’; defaults to options.mode.


mootools docs - Fx-Transitions

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Fx. Transitions.js

Effects transitions, to be used with all the effects.

License

MIT-style license.

Credits

Easing Equations by Robert Penner, http://www.robertpenner.com/easing/, modified & optimized to be used with mootools.

Summary
Fx. Transitions.js | Effects transitions, to be used with all the effects.
Fx. Transitions | A collection of tweening transitions for use with the Fx.Base classes.
Properties |
linear | displays a linear transition.
Quad | displays a quadratic transition.
Cubic | displays a cubicular transition.
Quart | displays a quartetic transition.
Quint | displays a quintic transition.
Pow | Used to generate Quad, Cubic, Quart and Quint.
Expo | displays a exponential transition.
Circ | displays a circular transition.
Sine | displays a sineousidal transition.
Back | makes the transition go back, then all forth.
Bounce | makes the transition bouncy.
Elastic | Elastic curve.

Fx. Transitions

A collection of tweening transitions for use with the Fx.Base classes.

Example

//Elastic.easeOut with default values:
new Fx.Style('margin', {transition:Fx.Transitions.Elastic.easeOut});
//Elastic.easeOut with user-defined value for elasticity.
 var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3);
new Fx.Style('margin', {transition: myTransition.easeOut});

See also

http://www.robertpenner.com/easing

Summary
Properties |
linear | displays a linear transition.
Quad | displays a quadratic transition.
Cubic | displays a cubicular transition.
Quart | displays a quartetic transition.
Quint | displays a quintic transition.
Pow | Used to generate Quad, Cubic, Quart and Quint.
Expo | displays a exponential transition.
Circ | displays a circular transition.
Sine | displays a sineousidal transition.
Back | makes the transition go back, then all forth.
Bounce | makes the transition bouncy.
Elastic | Elastic curve.

Properties

linear

displays a linear transition.

Graph

Quad

displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut

Graph

Cubic

displays a cubicular transition. Must be used as Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut

Graph

Quart

displays a quartetic transition. Must be used as Quart.easeIn or Quart.easeOut or Quart.easeInOut

Graph

Quint

displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut

Graph

Pow

Used to generate Quad, Cubic, Quart and Quint. By default is p^6.

Graph

(see Pow.png)

Expo

displays a exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut

Graph

Circ

displays a circular transition. Must be used as Circ.easeIn or Circ.easeOut or Circ.easeInOut

Graph

Sine

displays a sineousidal transition. Must be used as Sine.easeIn or Sine.easeOut or Sine.easeInOut

Graph

Back

makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut

Graph

Bounce

makes the transition bouncy. Must be used as Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut

Graph

Elastic

Elastic curve. Must be used as Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut

Graph

Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and tidy, and GeSHi

copyright ©2007 Valerio Proietti


mootools docs - Fx-Utils

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Fx. Utils.js

Contains Fx.Height, Fx.Width, Fx.Opacity. Only useful if you really, really need to toggle those values, and toggling only works in STRICT DOCTYPE. See Fx.Style for a better alternative.

License

MIT-style license.

Summary
Fx. Utils.js | Contains Fx.Height, Fx.Width, Fx.Opacity.
Fx. Height | Alters the height of an element.
Properties |
toggle | Toggles the height of an element from zero to it’s scrollHeight, and vice-versa.
show | Size the element to its full scrollHeight immediatly, without applying a transition.
Fx. Width | Same as Fx.Height, but uses Width.
Fx. Opacity | Same as Fx.Height, but uses Opacity.

Fx. Height

Alters the height of an element. Extends Fx.Style (and consequentially Fx.Base), and inherits all its methods.

Arguments

el | the $(element) to apply the style transition to
options | the Fx.Base options (see: Fx.Base)

Example

var myEffect = new Fx.Height('myElementId', {duration: 500});
myEffect.toggle(); //will close the element if open, andvice-versa.
Summary
Properties |
toggle | Toggles the height of an element from zero to it’s scrollHeight, and vice-versa.
show | Size the element to its full scrollHeight immediatly, without applying a transition.

Properties

toggle

Toggles the height of an element from zero to it’s scrollHeight, and vice-versa.

show

Size the element to its full scrollHeight immediatly, without applying a transition.

Fx. Width

Same as Fx.Height, but uses Width. It always toggles from its initial width to zero, and vice versa.

Fx. Opacity

Same as Fx.Height, but uses Opacity. It always toggles from opaque to transparent, and vice versa.


mootools docs - Drag-Base

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Drag. Base.js

Contains Drag.Base, Element.makeResizable

License

MIT-style license.

Summary
Drag. Base.js | Contains Drag.Base, Element.makeResizable
Drag.Base | Modify two css properties of an element based on the position of the mouse.
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
makeResizable | Makes an element resizable (by dragging) with the supplied options.

Drag.Base

Modify two css properties of an element based on the position of the mouse.

Note

Drag.Base requires an XHTML doctype.

Arguments

el | the $(element) to apply the transformations to.
options | optional. The options object.

Options

handle | the $(element) to act as the handle for the draggable element. defaults to the $(element) itself.
modifiers | an object. see Modifiers Below.
onStart | optional, function to execute when the user starts to drag (on mousedown);
onComplete | optional, function to execute when the user completes the drag.
onDrag | optional, function to execute at every step of the drag
limit | an object, see Limit below.
grid | optional, distance in px for snap-to-grid dragging
snap | optional, the distance you have to drag before the element starts to respond to the drag. defaults to false

modifiers

x | string, the style you want to modify when the mouse moves in an horizontal direction. defaults to ‘left?
y | string, the style you want to modify when the mouse moves in a vertical direction. defaults to ‘top?

limit

x | array with start and end limit relative to modifiers.x
y | array with start and end limit relative to modifiers.y

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
makeResizable | Makes an element resizable (by dragging) with the supplied options.

Properties

makeResizable

Makes an element resizable (by dragging) with the supplied options.

Arguments

options see Drag.Base for acceptable options.


mootools docs - Drag-Move

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Drag. Move.js

Contains Drag.Move, Element.makeDraggable

License

MIT-style license.

Summary
Drag. Move.js | Contains Drag.Move, Element.makeDraggable
Drag.Move | Extends Drag.Base, has additional functionality for dragging an element, support snapping and droppables.
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties |
makeDraggable | Makes an element draggable with the supplied options.

Drag.Move

Extends Drag.Base, has additional functionality for dragging an element, support snapping and droppables. Drag.move supports either position absolute or relative. If no position is found, absolute will be set.

Note

Drag.Move requires an XHTML doctype.

Arguments

el | the $(element) to apply the drag to.
options | optional. see Options below.

Options

all the drag.Base options, plus: container - an element, will fill automatically limiting options based on the $(element) size and position. defaults to false (no limiting) droppables - an array of elements you can drop your draggable to. overflown - an array of nested scrolling containers, see Element::getPosition

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties |
makeDraggable | Makes an element draggable with the supplied options.

Properties

makeDraggable

Makes an element draggable with the supplied options.

Arguments

options see Drag.Move and Drag.Base for acceptable options.


mootools docs - Hash

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Hash.js

Contains the class Hash.

License

MIT-style license.

Summary
Hash.js | Contains the class Hash.
Hash | It wraps an object that it uses internally as a map.
Properties |
get | Retrieves a value from the hash.
hasKey | Check the presence of a specified key-value pair in the hash.
set | Adds a key-value pair to the hash or replaces a previous value associated with the key.
remove | Removes a key-value pair from the hash.
each | Calls a function for each key-value pair.
extend | Extends the current hash with an object containing key-value pairs.
merge | Merges the current hash with multiple objects.
empty | Empties all hash values properties and values.
keys | Returns an array containing all the keys, in the same order as the values returned by Hash.values.
values | Returns an array containing all the values, in the same order as the keys returned by Hash.keys.
Utility Functions |
Functions |
$H | Shortcut to create a Hash from an Object.

Hash

It wraps an object that it uses internally as a map. The user must use set(), get(), and remove() to add/change, retrieve and remove values, it must not access the internal object directly. null/undefined values are allowed.

Note

Each hash instance has the length property.

Arguments

obj an object to convert into a Hash instance.

Example

var hash = new Hash({a: 'hi', b: 'world', c: 'howdy'});
hash.remove('b'); // b is removed.
hash.set('c', 'hello');
hash.get('c'); // returns 'hello'
hash.length // returns 2 (a and c)
Summary
Properties |
get | Retrieves a value from the hash.
hasKey | Check the presence of a specified key-value pair in the hash.
set | Adds a key-value pair to the hash or replaces a previous value associated with the key.
remove | Removes a key-value pair from the hash.
each | Calls a function for each key-value pair.
extend | Extends the current hash with an object containing key-value pairs.
merge | Merges the current hash with multiple objects.
empty | Empties all hash values properties and values.
keys | Returns an array containing all the keys, in the same order as the values returned by Hash.values.
values | Returns an array containing all the values, in the same order as the keys returned by Hash.keys.

Properties

get

Retrieves a value from the hash.

Arguments

key The key

Returns

The value

hasKey

Check the presence of a specified key-value pair in the hash.

Arguments

key The key

Returns

True if the Hash contains a value for the specified key, otherwise false

set

Adds a key-value pair to the hash or replaces a previous value associated with the key.

Arguments

key | The key
value | The value

remove

Removes a key-value pair from the hash.

Arguments

key The key

each

Calls a function for each key-value pair. The first argument passed to the function will be the value, the second one will be the key, like $each.

Arguments

fn | The function to call for each key-value pair
bind | Optional, the object that will be referred to as “this” in the function

extend

Extends the current hash with an object containing key-value pairs. Values for duplicate keys will be replaced by the new ones.

Arguments

obj An object containing key-value pairs

merge

Merges the current hash with multiple objects.

empty

Empties all hash values properties and values.

keys

Returns an array containing all the keys, in the same order as the values returned by Hash.values.

Returns

An array containing all the keys of the hash

values

Returns an array containing all the values, in the same order as the keys returned by Hash.keys.

Returns

An array containing all the values of the hash

Utility Functions

Summary
Functions |
$H | Shortcut to create a Hash from an Object.

Functions

$H

Shortcut to create a Hash from an Object.


mootools docs - Hash-Cookie

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Hash. Cookie.js

Stores and loads an Hash as a cookie using Json format.

Summary
Hash. Cookie.js | Stores and loads an Hash as a cookie using Json format.
Hash. Cookie | Inherits all the methods from Hash, additional methods are save and load.
Properties |
save | Saves the Hash to the cookie.
load | Loads the cookie and assigns it to the Hash.

Hash. Cookie

Inherits all the methods from Hash, additional methods are save and load. Hash json string has a limit of 4kb (4096byte), so be careful with your Hash size. Creating a new instance automatically loads the data from the Cookie into the Hash. If the Hash is emptied, the cookie is also removed.

Arguments

name | the key (name) for the cookie
options | options are identical to Cookie and are simply passed along to it. In addition, it has the autoSave option, to save the cookie at every operation. defaults to true.

Example

var fruits = new Hash.Cookie('myCookieName', {duration: 3600});
fruits.extend({
    'lemon': 'yellow',
    'apple': 'red'
});
fruits.set('melon', 'green');
fruits.get('lemon'); // yellow

// ... on another page ... values load automatically

var fruits = new Hash.Cookie('myCookieName', {duration: 365});
fruits.get('melon'); // green

fruits.erase(); // delete cookie
Summary
Properties |
save | Saves the Hash to the cookie.
load | Loads the cookie and assigns it to the Hash.

Properties

save

Saves the Hash to the cookie. If the hash is empty, removes the cookie.

Returns

Returns false when the JSON string cookie is too long (4kb), otherwise true.

Example

var login = new Hash.Cookie('userstatus', {autoSave: false});

login.extend({
    'username': 'John',
    'credentials': [4, 7, 9]
});
login.set('last_message', 'User logged in!');

login.save(); // finally save the Hash

load

Loads the cookie and assigns it to the Hash.


mootools docs - Color

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Color.js

Contains the Color class.

License

MIT-style license.

Summary
Color.js | Contains the Color class.
Color | Creates a new Color Object, which is an array with some color specific methods.
Properties |
mix | Mixes two or more colors with the Color.
invert | Inverts the Color.
setHue | Modifies the hue of the Color, and returns a new one.
setSaturation | Changes the saturation of the Color, and returns a new one.
setBrightness | Changes the brightness of the Color, and returns a new one.
Utility Functions |
Functions |
$RGB | Shortcut to create a new color, based on red, green, blue values.
$HSB | Shortcut to create a new color, based on hue, saturation, brightness values.
Array | A collection of The Array Object prototype methods.
Properties |
rgbToHsb | Converts a RGB array to an HSB array.
hsbToRgb | Converts an HSB array to an RGB array.

Color

Creates a new Color Object, which is an array with some color specific methods. Arguments: color - the hex, the RGB array or the HSB array of the color to create. For HSB colors, you need to specify the second argument. type - a string representing the type of the color to create. needs to be specified if you intend to create the color with HSB values, or an array of HEX values. Can be ‘rgb’, ‘hsb’ or ‘hex’.

Example

var black = new Color('#000');
var purple = new Color([255,0,255]);
// mix black with white and purple, each time at 10% of the newcolor
var darkpurple = black.mix('#fff', purple, 10);
$('myDiv').setStyle('background-color', darkpurple);
Summary
Properties |
mix | Mixes two or more colors with the Color.
invert | Inverts the Color.
setHue | Modifies the hue of the Color, and returns a new one.
setSaturation | Changes the saturation of the Color, and returns a new one.
setBrightness | Changes the brightness of the Color, and returns a new one.

Properties

mix

Mixes two or more colors with the Color.

Arguments

color | a color to mix. you can use as arguments how many colors as you want to mix with the original one.
alpha | if you use a number as the last argument, it will be threated as the amount of the color to mix.

invert

Inverts the Color.

setHue

Modifies the hue of the Color, and returns a new one.

Arguments

value the hue to set

setSaturation

Changes the saturation of the Color, and returns a new one.

Arguments

percent the percentage of the saturation to set

setBrightness

Changes the brightness of the Color, and returns a new one.

Arguments

percent the percentage of the brightness to set

Utility Functions

Summary
Functions |
$RGB | Shortcut to create a new color, based on red, green, blue values.
$HSB | Shortcut to create a new color, based on hue, saturation, brightness values.

Functions

$RGB

Shortcut to create a new color, based on red, green, blue values.

Arguments

r | (integer) red value (0-255)
g | (integer) green value (0-255)
b | (integer) blue value (0-255)

$HSB

Shortcut to create a new color, based on hue, saturation, brightness values.

Arguments

h | (integer) hue value (0-100)
s | (integer) saturation value (0-100)
b | (integer) brightness value (0-100)

Array

A collection of The Array Object prototype methods.

Summary
Properties |
rgbToHsb | Converts a RGB array to an HSB array.
hsbToRgb | Converts an HSB array to an RGB array.

Properties

rgbToHsb

Converts a RGB array to an HSB array.

Returns

the HSB array.

hsbToRgb

Converts an HSB array to an RGB array.

Returns

the RGB array.


mootools docs - Group

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Group.js

For Grouping Classes or Elements Events. The Event added to the Group will fire when all of the events of the items of the group are fired.

License

MIT-style license.

Summary
Group.js | For Grouping Classes or Elements Events.
Group | An “Utility” Class.
Properties |
addEvent | adds an event to the stack of events of the Class instances.

Group

An “Utility” Class.

Arguments

List of Class instances

Example

xhr1 = new Ajax('data.js', {evalScript: true});
xhr2 = new Ajax('abstraction.js', {evalScript: true});
xhr3 = new Ajax('template.js', {evalScript: true});

var group = new Group(xhr1, xhr2, xhr3);
group.addEvent('onComplete', function(){
    alert('All Scripts loaded');
});

xhr1.request();
xhr2.request();
xhr3.request();
Summary
Properties |
addEvent | adds an event to the stack of events of the Class instances.

Properties

addEvent

adds an event to the stack of events of the Class instances.

Arguments

type | string; the event name (e.g. ‘onComplete’)
fn | function to execute when all instances fired this event


mootools docs - Scroller

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Scroller.js

Contains the Scroller.

License

MIT-style license.

Summary
Scroller.js | Contains the Scroller.
Scroller | The Scroller is a class to scroll any element with an overflow (including the window) when the mouse cursor reaches certain buondaries of that element.
Properties |
start | The scroller starts listening to mouse movements.
stop | The scroller stops listening to mouse movements.

Scroller

The Scroller is a class to scroll any element with an overflow (including the window) when the mouse cursor reaches certain buondaries of that element. You must call its start method to start listening to mouse movements.

Note

The Scroller requires an XHTML doctype.

Arguments

element | required, the element to scroll.
options | optional, see options below, and Fx.Base options.

Options

area | integer, the necessary boundaries to make the element scroll.
velocity | integer, velocity ratio, the modifier for the window scrolling speed.
onChange | optionally, when the mouse reaches some boundaries, you can choose to alter some other values, instead of the scrolling offsets. Automatically passes as parameters x and y values.
Summary
Properties |
start | The scroller starts listening to mouse movements.
stop | The scroller stops listening to mouse movements.

Properties

start

The scroller starts listening to mouse movements.

stop

The scroller stops listening to mouse movements.


mootools docs - Slider

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Slider.js

Contains Slider

License

MIT-style license.

Summary
Slider.js | Contains Slider
Slider | Creates a slider with two elements: a knob and a container.
Properties |
set | The slider will get the step you pass.

Slider

Creates a slider with two elements: a knob and a container. Returns the values.

Note

The Slider requires an XHTML doctype.

Arguments

element | the knob container
knob | the handle
options | see Options below

Options

onChange | a function to fire when the value changes.
onComplete | a function to fire when you’re done dragging.
onTick | optionally, you can alter the onTick behavior, for example displaying an effect of the knob moving to the desired position. Passes as parameter the new position.
steps | the number of steps for your slider.
mode | either ‘horizontal’ or ‘vertical’. defaults to horizontal.
offset | relative offset for knob position. default to 0.
Summary
Properties |
set | The slider will get the step you pass.

Properties

set

The slider will get the step you pass.

Arguments

step one integer


mootools docs - SmoothScroll

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

SmoothScroll.js

Contains SmoothScroll

License

MIT-style license.

Summary
SmoothScroll.js | Contains SmoothScroll
SmoothScroll | Auto targets all the anchors in a page and display a smooth scrolling effect upon clicking them.

SmoothScroll

Auto targets all the anchors in a page and display a smooth scrolling effect upon clicking them.

Note

SmoothScroll requires an XHTML doctype.

Arguments

options the Fx.Scroll options (see: Fx.Scroll) plus links, a collection of elements you want your smoothscroll on. Defaults to document.links.

Example

new SmoothScroll();


mootools docs - Sortables

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Sortables.js

Contains Sortables Class.

License

MIT-style license.

Summary
Sortables.js | Contains Sortables Class.
Sortables | Creates an interface for Drag.Base and drop, resorting of a list.

Sortables

Creates an interface for Drag.Base and drop, resorting of a list.

Note

The Sortables require an XHTML doctype.

Arguments

list | required, the list that will become sortable.
options | an Object, see options below.

Options

handles | a collection of elements to be used for drag handles. defaults to the elements.
onStart | function executed when the item starts dragging
onComplete | function executed when the item ends dragging


mootools docs - Tips

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Tips.js

Tooltips, BubbleTips, whatever they are, they will appear on mouseover

License

MIT-style license.

Credits

The idea behind Tips.js is based on Bubble Tooltips (http://web-graphics.com/mtarchive/001717.php) by Alessandro Fulcitiniti http://web-graphics.com

Summary
Tips.js | Tooltips, BubbleTips, whatever they are, they will appear on mouseover
Tips | Display a tip on any element with a title and/or href.

Tips

Display a tip on any element with a title and/or href.

Note

Tips requires an XHTML doctype.

Arguments

elements | a collection of elements to apply the tooltips to on mouseover.
options | an object. See options Below.

Options

maxTitleChars | the maximum number of characters to display in the title of the tip. defaults to 30.
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);
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.

Example

<img src="images/i.png" title="The body of the tooltip isstored in the title" class="toolTipImg"/>
<script>
    var myTips = new Tips($$('.toolTipImg'), {
    maxTitleChars: 50   //I like my captions a little long
    });
</script>

Note

The title of the element will always be used as the tooltip body. If you put :: on your title, the text before :: will become the tooltip title.


mootools docs - Accordion

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Accordion.js

Contains Accordion

License

MIT-style license.

Summary
Accordion.js | Contains Accordion
Accordion | The Accordion class creates a group of elements that are toggled when their handles are clicked.
Properties |
display | Shows a specific section and hides all others.

Accordion

The Accordion class creates a group of elements that are toggled when their handles are clicked. When one elements toggles in, the others toggles back.

Note

The Accordion requires an XHTML doctype.

Arguments

togglers | required, a collection of elements, the elements handlers that will be clickable.
elements | required, a collection of elements the transitions will be applied to.
options | optional, see options below, and Fx.Base options.

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.
onActive | function to execute when an element starts to show
onBackground | function to execute when an element starts to hide
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.
Summary
Properties |
display | Shows a specific section and hides all others.

Properties

display

Shows a specific section and hides all others. Useful when triggering an accordion from outside.

Arguments

index integer, the index of the item to show, or the actual element to show.


mootools docs - General

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties
Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
$#! |
 | $
 | $$
 | $A
 | $chk
 | $clear
 | $defined
 | $E
 | $each
 | $ES
 | $extend
 | $H
 | $HSB
 | $merge
 | $native
 | $pick
 | $random
 | $RGB
 | $time
 | $type
A |
 | Abstract
 | Accordion
 | Accordion.js
 | addClass, Element
 | addEvent Element Events Group
 | addEvents, Element
 | adopt, Element
 | Ajax
 | Ajax.js
 | appendText, Element
 | Array Native/ Array.js Plugins/ Color.js
 | Array.js
 | Assets.js
 | associate, Array
 | attempt, Function
B |
 | Back, Fx. Transitions
 | bind, Function
 | bindAsEventListener, Function
 | bindWithEvent, Function
 | Bounce, Fx. Transitions
C |
 | callChain, Chain
 | camelCase, String
 | cancel, XHR
 | capitalize, String
 | chain, Chain
 | Chain
 | Circ, Fx. Transitions
 | Class
 | Class. Extras.js
 | Class.js
 | clean, String
 | clearChain, Chain
 | clone, Element
 | cloneEvents, Element
 | Color
 | Color.js
 | contains Array String
 | Cookie
 | Cookie.js
 | copy, Array
 | Core.js
 | create, Function
 | css
 | Cubic, Fx. Transitions
 | Custom Events Element/ Element. Event.js Window/ Window. DomReady.js
D |
 | delay, Function
 | display, Accordion
 | domready
 | Drag.Base
 | Drag. Base.js
 | Drag.Move
 | Drag. Move.js
E |
 | each Array Hash
 | effect, Element
 | effects, Element
 | Elastic, Fx. Transitions
 | Element Drag/ Drag. Base.js Drag/ Drag. Move.js Effects/ Fx. Style.js Effects/ Fx. Styles.js Element/ Element. Dimensions.js Element/ Element. Event.js Element/ Element. Form.js Element/ Element. Selectors.js Native/ Element.js Remote/ Ajax.js
 | Element. Dimensions.js
 | Element. Event.js
 | Element. Filters.js
 | Element. Form.js
 | Element.js
 | Element. Selectors.js
 | Elements Element/ Element. Filters.js Native/ Element.js
 | empty Class Element Hash
 | escapeRegExp, String
 | evalScripts, Ajax
 | evaluate, Json
 | Event
 | Events Class/ Class. Extras.js Element/ Element. Event.js Window/ Window. DomReady.js
 | every, Array
 | Expo, Fx. Transitions
 | extend Array Class Hash
returns the element passed in with all the Element prototypes applied.
Selects, and extends DOM elements.
Same as Array.copy, but as function.
Returns true if the passed in value/object exists or is 0, otherwise returns false.
clears a timeout or an Interval.
Returns true if the passed in value/object is defined, that means is not null or undefined.
Selects a single (i.e.
Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.
Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter.
Copies all the properties from the second passed object to the first passed Object.
Shortcut to create a Hash from an Object.
Shortcut to create a new color, based on hue, saturation, brightness values.
merges a number of objects recursively without referencing them or their sub-objects.
Will add a .extend method to the objects passed as a parameter, but the property passed in will be copied to the object’s prototype only if non previously existent.
Returns the first object if defined, otherwise returns the second.
Returns a random integer number between the two passed in values.
Shortcut to create a new color, based on red, green, blue values.
Returns the current timestamp
Returns the type of object that matches the element passed in.
Abstract class, to be used as singleton.
The Accordion class creates a group of elements that are toggled when their handles are clicked.
Contains Accordion
Adds the passed in class to the Element, if the element doesnt already have it.
Attaches an event listener to a DOM element.
adds an event to the stack of events of the Class instance.
adds an event to the stack of events of the Class instances.
As addEvent, but accepts an object and add multiple events at once.
Inserts the passed elements inside the Element.
An Ajax class, For all your asynchronous needs.
Contains the Ajax class.
Appends text node to a DOM element.
A collection of The Array Object prototype methods.
Contains Array prototypes, $A, $each
provides dynamic loading for images, css and javascript files.
Creates an object with key-value pairs based on the array of keywords passed in and the current content of the array.
Tries to execute the function, returns either the result of the function or false on error.
makes the transition go back, then all forth.
method to easily create closures with “this” altered.
cross browser method to pass event firer
automatically passes mootools Event Class.
makes the transition bouncy.
Executes the first function of the Chain instance stack, then removes it.
Converts a hiphenated string to a camelcase string.
Cancels the running request.
Converts the first letter in each word of a string to Uppercase.
adds a function to the Chain instance stack.
An “Utility” Class.
displays a circular transition.
The base class object of the http://mootools.net framework.
Contains common implementations for custom classes.
Contains the Class Function, aims to ease the creation of reusable Classes.
trims (String.trim) a string AND removes all the double spaces in a string.
Clears the stack of a Chain instance.
Clones the Element and returns the cloned one.
Clones all events from an element to this element.
Creates a new Color Object, which is an array with some color specific methods.
Contains the Color class.
Tests an array for the presence of an item.
checks if the passed in string is contained in the String.
Class for creating, getting, and removing cookies.
A cookie reader/creator
returns a copy of the array.
Main function to create closures.
Injects a css file in the page.
displays a cubicular transition.
Delays the execution of a function by a specified duration.
Shows a specific section and hides all others.
executes a function when the dom tree is loaded, without waiting for images.
Modify two css properties of an element based on the position of the mouse.
Contains Drag.Base, Element.makeResizable
Extends Drag.Base, has additional functionality for dragging an element, support snapping and droppables.
Contains Drag.Move, Element.makeDraggable
Same as Array.forEach.
Calls a function for each key-value pair.
Applies an Fx.Style to the Element; This a shortcut for Fx.Style.
Applies an Fx.Styles to the Element; This a shortcut for Fx.Styles.
Elastic curve.
Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Contains Element prototypes to deal with Element size and position in space.
Contains the Event Class, Element methods to deal with Element events, custom Events, and the Function prototype bindWithEvent.
add Filters capability to Elements.
Contains Element prototypes to deal with Forms and their elements.
Contains useful Element prototypes, to be used with the dollar function $.
Css Query related functions and Element extensions
A collection of methods to be used with $$ elements collections.
Returns an empty function
Empties an element of all its children.
Empties all hash values properties and values.
Returns string with escaped regular expression characters
Executes scripts in the response text
converts a json string to an javascript Object.
Cross browser methods to manage events.
An “Utility” Class.
This method is provided only for browsers without native every support.
displays a exponential transition.
Extends an array with another one.
Returns the copy of the Class extended with the passed in properties.
Extends the current hash with an object containing key-value pairs.


mootools docs - Classes

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties
Class Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
A |
 | Abstract
 | Accordion
 | Ajax
 | Array Native/ Array.js Plugins/ Color.js
C |
 | Chain
 | Class
 | Color
 | Cookie
D |
 | Drag.Base
 | Drag.Move
E |
 | Element Drag/ Drag. Base.js Drag/ Drag. Move.js Effects/ Fx. Style.js Effects/ Fx. Styles.js Element/ Element. Dimensions.js Element/ Element. Event.js Element/ Element. Form.js Element/ Element. Selectors.js Native/ Element.js Remote/ Ajax.js
 | Elements Element/ Element. Filters.js Native/ Element.js
 | Event
 | Events
F |
 | Function Element/ Element. Event.js Native/ Function.js
 | Fx.Base
 | Fx. Elements
 | Fx. Height
 | Fx. Opacity
 | Fx. Scroll
 | Fx. Slide
 | Fx. Style
 | Fx. Styles
 | Fx. Transitions
 | Fx. Width
G |
 | Group
H |
 | Hash
 | Hash. Cookie
J |
 | Json
 | Json. Remote
N |
 | Number
O |
 | Options
S |
 | Scroller
 | Slider
 | SmoothScroll
 | Sortables
 | String
T |
 | Tips
W |
 | window Core/ Core.js Window/ Window. Size.js
X |
 | XHR
Abstract class, to be used as singleton.
The Accordion class creates a group of elements that are toggled when their handles are clicked.
An Ajax class, For all your asynchronous needs.
A collection of The Array Object prototype methods.
An “Utility” Class.
The base class object of the http://mootools.net framework.
Creates a new Color Object, which is an array with some color specific methods.
Class for creating, getting, and removing cookies.
Modify two css properties of an element based on the position of the mouse.
Extends Drag.Base, has additional functionality for dragging an element, support snapping and droppables.
Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
A collection of methods to be used with $$ elements collections.
Cross browser methods to manage events.
An “Utility” Class.
A collection of The Function Object prototype methods.
Base class for the Mootools Effects (Moo.Fx) library.
Fx.Elements allows you to apply any number of styles transitions to a selection of elements.
Alters the height of an element.
Same as Fx.Height, but uses Opacity.
Scroll any element with an overflow, including the window element.
The slide effect; slides an element in horizontally or vertically, the contents will fold inside.
The Style effect; Extends Fx.Base, inherits all its properties.
Allows you to animate multiple css properties at once; Extends Fx.Base, inherits all its properties.
A collection of tweening transitions for use with the Fx.Base classes.
Same as Fx.Height, but uses Width.
An “Utility” Class.
It wraps an object that it uses internally as a map.
Inherits all the methods from Hash, additional methods are save and load.
Simple Json parser and Stringyfier, See: http://www.json.org/
Wrapped XHR with automated sending and receiving of Javascript Objects in Json Format.
A collection of The Number Object prototype methods.
An “Utility” Class.
The Scroller is a class to scroll any element with an overflow (including the window) when the mouse cursor reaches certain buondaries of that element.
Creates a slider with two elements: a knob and a container.
Auto targets all the anchors in a page and display a smooth scrolling effect upon clicking them.
Creates an interface for Drag.Base and drop, resorting of a list.
A collection of The String Object prototype methods.
Display a tip on any element with a title and/or href.
Some properties are attached to the window object by the browser detection.
Basic XMLHttpRequest Wrapper.


mootools docs - Events

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties
Event Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
D |
 | domready
M |
 | mouseenter
 | mouseleave
executes a function when the dom tree is loaded, without waiting for images.
In addition to the standard javascript events (load, mouseover, mouseout, click, etc.)
this event fires when the mouse exits the area of the dom element; will not be fired again if the mouse crosses over children of the element (unlike mouseout)


mootools docs - Files

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties
File Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
A |
 | Accordion.js
 | Ajax.js
 | Array.js
 | Assets.js
C |
 | Class. Extras.js
 | Class.js
 | Color.js
 | Cookie.js
 | Core.js
D |
 | Drag. Base.js
 | Drag. Move.js
E |
 | Element. Dimensions.js
 | Element. Event.js
 | Element. Filters.js
 | Element. Form.js
 | Element.js
 | Element. Selectors.js
F |
 | Function.js
 | Fx. Base.js
 | Fx. CSS.js
 | Fx. Elements.js
 | Fx. Scroll.js
 | Fx. Slide.js
 | Fx. Style.js
 | Fx. Styles.js
 | Fx. Transitions.js
 | Fx. Utils.js
G |
 | Group.js
H |
 | Hash. Cookie.js
 | Hash.js
J |
 | Json.js
 | Json. Remote.js
S |
 | Scroller.js
 | Slider.js
 | SmoothScroll.js
 | Sortables.js
 | String.js
T |
 | Tips.js
W |
 | Window. DomReady.js
 | Window. Size.js
X |
 | XHR.js
Contains Accordion
Contains the Ajax class.
Contains Array prototypes, $A, $each
provides dynamic loading for images, css and javascript files.
Contains common implementations for custom classes.
Contains the Class Function, aims to ease the creation of reusable Classes.
Contains the Color class.
A cookie reader/creator
Contains Drag.Base, Element.makeResizable
Contains Drag.Move, Element.makeDraggable
Contains Element prototypes to deal with Element size and position in space.
Contains the Event Class, Element methods to deal with Element events, custom Events, and the Function prototype bindWithEvent.
add Filters capability to Elements.
Contains Element prototypes to deal with Forms and their elements.
Contains useful Element prototypes, to be used with the dollar function $.
Css Query related functions and Element extensions
Contains Function prototypes and utility functions .
Contains Fx.Base and two Transitions.
Css parsing class for effects.
Contains Fx.Elements
Contains Fx.Scroll
Contains Fx.Slide
Contains Fx.Style
Contains Fx.Styles
Effects transitions, to be used with all the effects.
Contains Fx.Height, Fx.Width, Fx.Opacity.
For Grouping Classes or Elements Events.
Stores and loads an Hash as a cookie using Json format.
Contains the class Hash.
Simple Json parser and Stringyfier, See: http://www.json.org/
Contains Json.Remote.
Contains the Scroller.
Contains Slider
Contains SmoothScroll
Contains Sortables Class.
Contains String prototypes and Number prototypes.
Tooltips, BubbleTips, whatever they are, they will appear on mouseover
Contains the custom event domready, for window.
Window cross-browser dimensions methods.
Contains the basic XMLHttpRequest Class Wrapper.


mootools docs - Functions

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties
Function Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
$#! |
 | $
 | $$
 | $A
 | $chk
 | $clear
 | $defined
 | $E
 | $each
 | $ES
 | $extend
 | $H
 | $HSB
 | $merge
 | $native
 | $pick
 | $random
 | $RGB
 | $time
 | $type
T |
 | toQueryString, Object
returns the element passed in with all the Element prototypes applied.
Selects, and extends DOM elements.
Same as Array.copy, but as function.
Returns true if the passed in value/object exists or is 0, otherwise returns false.
clears a timeout or an Interval.
Returns true if the passed in value/object is defined, that means is not null or undefined.
Selects a single (i.e.
Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.
Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter.
Copies all the properties from the second passed object to the first passed Object.
Shortcut to create a Hash from an Object.
Shortcut to create a new color, based on hue, saturation, brightness values.
merges a number of objects recursively without referencing them or their sub-objects.
Will add a .extend method to the objects passed as a parameter, but the property passed in will be copied to the object’s prototype only if non previously existent.
Returns the first object if defined, otherwise returns the second.
Returns a random integer number between the two passed in values.
Shortcut to create a new color, based on red, green, blue values.
Returns the current timestamp
Returns the type of object that matches the element passed in.
Generates a querystring from key/pair values in an object


mootools docs - Properties

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties
Property Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
A |
 | addClass, Element
 | addEvent Element Events Group
 | addEvents, Element
 | adopt, Element
 | appendText, Element
 | associate, Array
 | attempt, Function
B |
 | Back, Fx. Transitions
 | bind, Function
 | bindAsEventListener, Function
 | bindWithEvent, Function
 | Bounce, Fx. Transitions
C |
 | callChain, Chain
 | camelCase, String
 | cancel, XHR
 | capitalize, String
 | chain, Chain
 | Circ, Fx. Transitions
 | clean, String
 | clearChain, Chain
 | clone, Element
 | cloneEvents, Element
 | contains Array String
 | copy, Array
 | create, Function
 | css
 | Cubic, Fx. Transitions
D |
 | delay, Function
 | display, Accordion
E |
 | each Array Hash
 | effect, Element
 | effects, Element
 | Elastic, Fx. Transitions
 | empty Class Element Hash
 | escapeRegExp, String
 | evalScripts, Ajax
 | evaluate, Json
 | every, Array
 | Expo, Fx. Transitions
 | extend Array Class Hash
F |
 | filter, Array
 | filterByAttribute, Elements
 | filterByClass, Elements
 | filterById, Elements
 | filterByTag, Elements
 | fireEvent Element Events
 | forEach, Array
G |
 | get Cookie Hash
 | getChildren, Element
 | getCoordinates, Element
 | getElement, Element
 | getElementById, Element
 | getElements, Element
 | getElementsByClassName, Element
 | getElementsBySelector, Element
 | getFirst, Element
 | getHeader, Ajax
 | getHeight, window
 | getLast Array Element
 | getLeft, Element
 | getNext, Element
 | getParent, Element
 | getPosition, Element
 | getPrevious, Element
 | getProperties, Element
 | getProperty, Element
 | getRandom, Array
 | getScrollHeight, window
 | getScrollLeft, window
 | getScrollTop, window
 | getScrollWidth, window
 | getSize Element window
 | getStyle, Element
 | getStyles, Element
 | getTag, Element
 | getTop, Element
 | getValue, Element
 | getWidth, window
H |
 | hasChild, Element
 | hasClass, Element
 | hasKey, Hash
 | hexToRgb, String
 | hide Fx. Slide Fx. Style
 | hsbToRgb, Array
 | hyphenate, String
I |
 | image
 | images
 | implement, Class
 | include, Array
 | indexOf, Array
 | initialize, Element
 | injectAfter, Element
 | injectBefore, Element
 | injectInside, Element
 | injectTop, Element
 | invert, Color
J |
 | javascript
K |
 | keys Event Hash
L |
 | limit, Number
 | linear, Fx. Transitions
 | load, Hash. Cookie
M |
 | makeDraggable, Element
 | makeResizable, Element
 | map, Array
 | merge Array Hash
 | mix, Color
P |
 | pass, Function
 | periodical, Function
 | Pow, Fx. Transitions
 | preventDefault, Event
Adds the passed in class to the Element, if the element doesnt already have it.
Attaches an event listener to a DOM element.
adds an event to the stack of events of the Class instance.
adds an event to the stack of events of the Class instances.
As addEvent, but accepts an object and add multiple events at once.
Inserts the passed elements inside the Element.
Appends text node to a DOM element.
Creates an object with key-value pairs based on the array of keywords passed in and the current content of the array.
Tries to execute the function, returns either the result of the function or false on error.
makes the transition go back, then all forth.
method to easily create closures with “this” altered.
cross browser method to pass event firer
automatically passes mootools Event Class.
makes the transition bouncy.
Executes the first function of the Chain instance stack, then removes it.
Converts a hiphenated string to a camelcase string.
Cancels the running request.
Converts the first letter in each word of a string to Uppercase.
adds a function to the Chain instance stack.
displays a circular transition.
trims (String.trim) a string AND removes all the double spaces in a string.
Clears the stack of a Chain instance.
Clones the Element and returns the cloned one.
Clones all events from an element to this element.
Tests an array for the presence of an item.
checks if the passed in string is contained in the String.
returns a copy of the array.
Main function to create closures.
Injects a css file in the page.
displays a cubicular transition.
Delays the execution of a function by a specified duration.
Shows a specific section and hides all others.
Same as Array.forEach.
Calls a function for each key-value pair.
Applies an Fx.Style to the Element; This a shortcut for Fx.Style.
Applies an Fx.Styles to the Element; This a shortcut for Fx.Styles.
Elastic curve.
Returns an empty function
Empties an element of all its children.
Empties all hash values properties and values.
Returns string with escaped regular expression characters
Executes scripts in the response text
converts a json string to an javascript Object.
This method is provided only for browsers without native every support.
displays a exponential transition.
Extends an array with another one.
Returns the copy of the Class extended with the passed in properties.
Extends the current hash with an object containing key-value pairs.
This method is provided only for browsers without native filter support.
Filters the collection by a specified attribute.
Filters the collection by a specified class name.
Filters the collection by a specified ID.
Filters the collection by a specified tag name.
executes all events of the specified type present in the element.
fires all events of the specified type in the Class instance.
Iterates through an array; This method is only available for browsers without native forEach support.
Gets the value of a cookie.
Retrieves a value from the hash.
returns all the $(element.childNodes), excluding text nodes.
Returns an object with width, height, left, right, top, and bottom, representing the values of the Element
Same as Element.getElements, but returns only the first.
Targets an element with the specified id found inside the Element.
Gets all the elements within an element that match the given (single) selector.
Returns all the elements that match a specific class name.
Same as Element.getElements, but allows for comma separated selectors, as in css.
Works as Element.getPrevious, but tries to find the firstChild.
Returns the given response header or null
Returns an integer representing the height of the browser window (without the scrollbar).
returns the last item in the Array
Works as Element.getPrevious, but tries to find the lastChild.
Returns the distance from the left of the window to the Element.
Works as Element.getPrevious, but tries to find the nextSibling.
returns the $(element.parentNode)
Returns the real offsets of the element.
Returns the previousSibling of the Element, excluding text nodes.
same as Element.getStyles, but for properties
Gets the an attribute of the Element.
returns a random item in the Array
Returns an integer representing the scrollHeight of the window.
Returns an integer representing the scrollLeft of the window (the number of pixels the window has scrolled from the left).
Returns an integer representing the scrollTop of the window (the number of pixels the window has scrolled from the top).
Returns an integer representing the scrollWidth of the window.
Return an Object representing the size/scroll values of the element.
Same as Element.getSize
Returns the style of the Element given the property passed in.
Returns an object of styles of the Element for each argument passed in.
Returns the tagName of the element in lower case.
Returns the distance from the top of the window to the Element.
Returns the value of the Element, if its tag is textarea, select or input.
Returns an integer representing the width of the browser window (without the scrollbar).
returns true if the passed in element is a child of the $(element).
Tests the Element to see if it has the passed in className.
Check the presence of a specified key-value pair in the hash.
Converts a hexidecimal color value to RGB.
Hides the element without a transition.
Same as Fx.Base.set (0); hides the element immediately without transition.
Converts an HSB array to an RGB array.
Converts a camelCased string to a hyphen-ated string.
Preloads an image and returns the img element.
Preloads an array of images (as strings) and returns an array of img elements.
Implements the passed in properties to the base Class prototypes, altering the base class, unlike Class.extend.
includes the passed in element in the array, only if its not already present.
This method is provided only for browsers without native indexOf support.
Creates a new element of the type passed in.
Same as Element.injectBefore, but inserts the element after.
Inserts the Element before the passed element.
Same as Element.injectBefore, but inserts the element inside.
Same as Element.injectInside, but inserts the element inside, at the top.
Inverts the Color.
Injects a javascript file in the page.
Returns an array containing all the keys, in the same order as the values returned by Hash.values.
Limits the number.
displays a linear transition.
Loads the cookie and assigns it to the Hash.
Makes an element draggable with the supplied options.
Makes an element resizable (by dragging) with the supplied options.
This method is provided only for browsers without native map support.
merges an array in another array, without duplicates.
Merges the current hash with multiple objects.
Mixes two or more colors with the Color.
Shortcut to create closures with arguments and bind.
Executes a function in the specified intervals of time
Used to generate Quad, Cubic, Quart and Quint.
cross browser method to prevent the default action of the event


mootools docs - Core

Core
Core.js
Class
Class.js
Class. Extras.js
Native
Array.js
Function.js
Number
String.js
Element.js
Element
Element. Selectors.js
Element. Filters.js
Element. Form.js
Element. Event.js
Element. Dimensions.js
Window
Window. DomReady.js
Window. Size.js
Remote
XHR.js
Ajax.js
Assets.js
Cookie.js
Json.js
Json. Remote.js
Effects
Fx. Base.js
Fx. CSS.js
Fx. Style.js
Fx. Styles.js
Fx. Elements.js
Fx. Scroll.js
Fx. Slide.js
Fx. Transitions.js
Fx. Utils.js
Drag
Drag. Base.js
Drag. Move.js
Plugins
Hash.js
Hash. Cookie.js
Color.js
Group.js
Scroller.js
Slider.js
SmoothScroll.js
Sortables.js
Tips.js
Accordion.js
Index
Everything
Classes
Events
Files
Functions
Properties

Core.js

Mootools My Object Oriented javascript.

License

MIT-style license.

MooTools Copyright

copyright © 2007 Valerio Proietti, http://mad4milk.net

MooTools Credits

  • Class is slightly based on Base.js http://dean.edwards.name/weblog/2006/03/base/ © 2006 Dean Edwards, License http://creativecommons.org/licenses/LGPL/2.1/
  • Some functions are inspired by those found in prototype.js http://prototype.conio.net/ © 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license
  • Documentation by Aaron Newton (aaron.newton [at] cnet [dot] com) and Valerio Proietti.
Summary
Core.js |
Functions |
$defined | Returns true if the passed in value/object is defined, that means is not null or undefined.
$type | Returns the type of object that matches the element passed in.
$merge | merges a number of objects recursively without referencing them or their sub-objects.
$extend | Copies all the properties from the second passed object to the first passed Object.
$native | Will add a .extend method to the objects passed as a parameter, but the property passed in will be copied to the object’s prototype only if non previously existent.
Abstract | Abstract class, to be used as singleton.
Utility Functions |
Functions |
$chk | Returns true if the passed in value/object exists or is 0, otherwise returns false.
$pick | Returns the first object if defined, otherwise returns the second.
$random | Returns a random integer number between the two passed in values.
$time | Returns the current timestamp
$clear | clears a timeout or an Interval.
window | Some properties are attached to the window object by the browser detection.

Functions

$defined

Returns true if the passed in value/object is defined, that means is not null or undefined.

Arguments

obj object to inspect

$type

Returns the type of object that matches the element passed in.

Arguments

obj the object to inspect.

Example

var myString = 'hello';
$type(myString); //returns "string"

Returns

’element? | if obj is a DOM element node
’textnode? | if obj is a DOM text node
’whitespace? | if obj is a DOM whitespace node
’arguments? | if obj is an arguments object
’object? | if obj is an object
’string? | if obj is a string
’number? | if obj is a number
’boolean? | if obj is a boolean
’function? | if obj is a function
’regexp? | if obj is a regular expression
’class? | if obj is a Class. (created with new Class, or the extend of another class).
’arguments? | if obj is the arguments object.
’collection? | if obj is a native htmlelements collection, such as childNodes, getElementsByTagName .. etc.
false | (boolean) if the object is not defined or none of the above.

$merge

merges a number of objects recursively without referencing them or their sub-objects.

Arguments

any number of objects.

Example

var mergedObj = $merge(obj1, obj2, obj3);
//obj1, obj2, and obj3 are unaltered

$extend

Copies all the properties from the second passed object to the first passed Object. If you do myWhatever.extend = $extend the first parameter will become myWhatever, and your extend function will only need one parameter.

Example

var firstOb = {
    'name': 'John',
    'lastName': 'Doe'
};
var secondOb = {
    'age': '20',
    'sex': 'male',
    'lastName': 'Dorian'
};
$extend(firstOb, secondOb);
//firstOb will become:
{
    'name': 'John',
    'lastName': 'Dorian',
    'age': '20',
    'sex': 'male'
};

Returns

The first object, extended.

$native

Will add a .extend method to the objects passed as a parameter, but the property passed in will be copied to the object’s prototype only if non previously existent. Its handy if you dont want the .extend method of an object to overwrite existing methods. Used automatically in mootools to implement Array/String/Function/Number methods to browser that dont support them whitout manual checking.

Arguments

a number of classes/native javascript objects

Abstract

Abstract class, to be used as singleton. Will add .extend to any object

Arguments

an object

Returns

the object with an .extend property, equivalent to $extend.

Utility Functions

Summary
Functions |
$chk | Returns true if the passed in value/object exists or is 0, otherwise returns false.
$pick | Returns the first object if defined, otherwise returns the second.
$random | Returns a random integer number between the two passed in values.
$time | Returns the current timestamp
$clear | clears a timeout or an Interval.

Functions

$chk

Returns true if the passed in value/object exists or is 0, otherwise returns false. Useful to accept zeroes.

Arguments

obj object to inspect

$pick

Returns the first object if defined, otherwise returns the second.

Arguments

obj | object to test
picked | the default to return

Example

function say(msg){
    alert($pick(msg, 'no meessage supplied'));
}

$random

Returns a random integer number between the two passed in values.

Arguments

min | integer, the minimum value (inclusive).
max | integer, the maximum value (inclusive).

Returns

a random integer between min and max.

$time

Returns the current timestamp

Returns

a timestamp integer.

$clear

clears a timeout or an Interval.

Returns

null

Arguments

timer the setInterval or setTimeout to clear.

Example

var myTimer = myFunction.delay(5000); //wait 5 seconds and executemy function.
myTimer = $clear(myTimer); //nevermind

See also

Function.delay, Function.periodical

window

Some properties are attached to the window object by the browser detection.

Properties

window.ie | will be set to true if the current browser is internet explorer (any).
window.ie6 | will be set to true if the current browser is internet explorer 6.
window.ie7 | will be set to true if the current browser is internet explorer 7.
window.gecko | will be set to true if the current browser is Mozilla/Gecko.
window.webkit | will be set to true if the current browser is Safari/Konqueror.
window.webkit419 | will be set to true if the current browser is Safari2 / webkit till version 419.
window.webkit420 | will be set to true if the current browser is Safari3 (Webkit SVN Build) / webkit over version 419.
window.opera | is set to true by opera itself.

Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and tidy, and GeSHi. CHM file made by Kris Zhou.