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]

  • The docs references provides links to the documentation for all the MooTools functions and Classes the demo is using.
  • The js code contains the JavaScript code of the demo.
    NOTE: All demos EXCEPT DomReadyVS.Load are wrapped inside a "domready" which is not included in the js code you see. (You can see it by viewing at page's actual source code). This means the following is the actual content of the page:

    window.addEvent('domready', function() {
	// HERE IS WHAT YOU READ IN JS CODE
});
    If you are going to reproduce the demo, remember the domready event! (More info about this topic is available here and here).
  • The html code is simply the portion of the HTML in the page that is specific to the demo.
  • The css code is simply the portion of the page's CSS that is relevant to the demo.

 

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.