Wiki Navigation

Frequently Asked Questions

Frequently Asked Questions
1. General
2. Fx / Effects
  1. Fx.Height doesn't work properly, or after downloading v1.0 I get that …
  2. Some of the Fx and even the Accordion looks weird what's going on?

General

I've added moo.fx, moo.fx.pack, and mootools, but my scripts do not work

Moo.* requires prototype or prototype.lite to function. MooTools, however, is independent of any extra JavaScript? framework. Attempt to remove all but mootools.js and see if your site runs properly, or as expected. If you had functions that used prototype, obviously there will be a need to port your site/functions to MooTools--not all of it, but just the prototype dependencies

Why can't I use Prototype, JQuery, Scriptaculous, and MooTools in one page?

Short and sweet answer is that you just can't. The more complicated answer, is that some of those frameworks use similar functions (like $) and they add Events which conflict with mootools. Depending on the order, and the framework that you add you will receive different results. Lastly, MooTools is not trying to be conflict free. Therefore, do not expect this to be a bug or unwanted behavior -- MooTools will not try to become conflict free. Expect, to make a choice between MooTools and the other frameworks.

Ah! My web site is broken after I upgraded to v1.0

Right, mootools v1.0 has changes to some of its method and classes. This will undoubtedly break some of your pre v1.0 code. Do not be concerned, however, there's a compatibility JS file that you can add to your page to try to make it v1.0 compatible. Here's the link. It is strongly advised, however, that you update your old code.

Ah! Why is the SVN Broken!

The developers attempt to commit bug-less code. The trunk section, however, is full of experimentations. Do not expect to have the code running or breaking.

I can't find the demo section. Where did it go!

Demo section is back again, you can find it above in the tab menu: demos.

Is there a way to do $$ only on elements within a specific Element?

There's a couple of ways to accomplish this.

//Option 1: Use CSS Selector
var result = $$('#yourElementID tag'); // ie. $$('#myEL b'); // where 12

//Option 2: Use getElement, getElements
var myID = $('yourElementID'); // ie. var myID = $('myEL');
var result = myID.getElements('tag'); // var result = myID.getElements('b'); // where 12

The second option could be useful inside functions or for loops that would access $(), $$() to frequently on a static element/variable.

My site needs all of MooTools. Any easy way to Download all of the modules without having to click each one of them?

Easy enough. If you have FireBug, go to the Download page and open your console. Type in the console: Download.all();

If you haven't Firebug you can type javascript:Download.all() in the URL Address Bar.

How do I stop a link being followed after an onclick event?

Easily done:

$('yourEl').addEvent('click', function(e) {
        e = new Event(e).stop(); // .stop method will stop the event from propagating
});

Read more at: http://docs.mootools.net/Native/Event.js

I've added my script in the head tag but nothing work when I load the page.

Trying to access an element (such as $('myElement')) when the DOM or the page are not yet ready, will make your script not working. In order to get your script working you have to wrap it inside a domready or load window event.

window.addEvent('domready', function() {
        // here goes your script that would be executed once the DOM is ready to get access to
        // Note: Ensure to add Window.DomReady from mootools download builder
});

Your head should now looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My HomePage</title>
 
<link rel="stylesheet" type="text/css" href="myStyles.css" />
 
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
        window.addEvent('domready', function() {
                // here goes your script that would be executed once the DOM is ready to get access to
                // Note: Ensure to add Window.DomReady from mootools download builder
        })
</script>
</head>
<body>
 
...

Read more at: http://docs.mootools.net/Window/Window-DomReady.js

Difference between Load and DomReady?: http://demos.mootools.net/DomReadyVS.Load

Fx / Effects

Fx.Height doesn't work properly, or after downloading v1.0 I get that Fx.Height is undefined

You can find Fx.Height here

Some of the Fx and even the Accordion looks weird what's going on?

Mootools expects your Doctype to be Strict. For more information on the different Doctypes go here.

Strict Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Download in other formats:

Plain Text