Window

Mootools extends the native window object with numerous helper functions.

Here are the docs for Window.DomReady.js.

Functions just like Element.addEvent, but adds the possibility to add the custom event 'domready':

window.addEvent('load', function(){...});

window.addEvent('domready', function(){...});

function myFunction(){...};
window.addEvent('domready', myFunction);

Note that window.onDomReady(function) is now deprecated.

This is an important nuance. Whenever you reference items in the DOM (the Document Object Model), they must already be loaded in the browser. If you had some code like this:

$$('a').each(function(link){
  //this is a silly example
  link.setStyle('color','blue');
});

It won't work unless you execute it after the anchor tags have loaded. So if you put this in the head of your document, this code won't do anything. If you put it in the middle of your doc, you'll catch all the links up to that point.

To get around this you have to execute your code after the page loads. You can use window.addEvent('load', function(){....init code here...}); but the "load" event waits for everything to load - images, css files, whatever.

This is where the event "domready" comes into play. This event fires when the HTML is loaded, even if the other assets (images, etc.) are not. So:

window.addEvent('domready', function(){
  $$('a').each(function(link){
    //this is a silly example
    link.setStyle('color','blue');
  });
});

Will fire as soon as the HTML is ready and all your links will turn blue.

Additionally, if you execute this code after the page loads, it'll just execute immediately. This way you don't have to worry about whether or not the page is ready in your code.

Here is the documentation for Window.Size.js.

Window.Size.js contains all the helper functions related to getting size information about the window.

Returns the width / height (an integer) of the document window.

Returns the total scrollable height / width (an integer) of the window.

Returns the scroll offset of the top / left of the window (i.e. how far the user has scrolled).

This is the same as Element.getSize(); it returns an object with the following information: Returns an object with x/y definitions for size (width/height), scroll (scroll offset left/top), and scroll size (scrollheight/width).

window.getSize();
//returns something like:
//{
//	scroll: {x:0,y:0},
//	scrollSize: {x=660,y=440},
//	size: {x=660,y=440},
//}

	/*	window's width	*/
	console.log('width: %s', window.getWidth());
	/*	window's height	*/
	console.log('height: %s', window.getHeight());
	/*	window's scrollable width	*/
	console.log('scroll width: %s', window.getScrollWidth());
	/*	window's scrollable height	*/
	console.log('scroll height: %s', window.getScrollHeight());
	/*	the top of the window location	*/
	console.log('scroll top: %s', window.getScrollTop());
	/*	the left of the window location	*/
	console.log('scroll left: %s', window.getScrollLeft());
	/*	the size properties:	*/
	console.log('window.getSize properties: %o', window.getSize());