Getting started using demos

The demos are provided here to give users an idea of how MooTools works. The worst thing you can do is to copy and paste code from the demos without understanding how it works. Instead, these demos aim to show you live examples of how the framework is used properly so you can understand the code and have fun playing with it. This doesn't mean you cannot copy the demos verbatim, but we will be more inclined to help if we determine that you understand not only how to copy and paste, but also how the demos work. The demos that work here should also work for you, so if they don't, try to solve your problem before asking for one of the developers to fix it for you.

Demos organization

All demos are all organized in the same way. On every demo's page you will find a navigation bar (see image below) and often information about its usage.

The navigation bar is composed by 4 links: docs references, js code, html code and css code.

[navigation bar]


Note: Why DomReadyVS.Load is different? DomReadyVS.Load attends to show you the difference between MooTools' custom domready event and the native onload event. Having a domready inserted into another domready would not provide the desired result.

Final notes

All of the demos listed here use the latest MooTools release. If you find a bug (and that means something wrong with one of the demos here), please report it in the forum. Also, before asking for any help, do yourself and the developers a favor and try to first understand the code, read the mootorial, read the documentation and read Michelle's article. If none of this helps, please come ask us in the forums.


We hope you enjoy our demos.

The MooTools Development Team.