The IGLOO platform utilizes Mootools, a JavaCcript framework for a number of system elements (for example, at the bottom of this page, the "Subscribe" and "Email Link" use mootools to create the animation of the form "sliding" down when clicked). In this series, we will create a script that creates a "box" over a page that has html content inside of it.

First, we will go over some of the basic pieces of mootools that we will require to complete this project. For starters, let's learn how to get an element. To do this, we will use the dollar function ($). This function takes an element's id, and return the element. We will be able to manipulate that element however we wish.

for example, the element in example 1 (here) has an id of "myElement". To retrieve this, we will do the following:

var element = $('myElement');

this will retrieve the element with an id of "myElement", and assign that to the variable "element". With this variable, we can assign, or retrieve information about that element. for example, to get the text inside of that element, we can use the function get, example:

which will return "Hello World!". To change the text, we will use the set function, as the below example shows:

element.set('text', 'Hello Changed Text');

Before these functions will work, we will need to make sure that element has been loaded (an element cannot be retrieved until it is loaded into the DOM) before we manipulate it. To do this, we will use events, specifically the mootools event "domready", which loads when the DOM has been fully loaded, and elements are loaded in the DOM. to use this, we need to do the following:

window.addEvent('domready', function(){
    var element = $('myElement');
    element.set('text', 'Hello Changed Text');
});

or, in english: once the elements in the window have been loaded, get the "myElement" element, and then change the text inside the element to say "Hello Changed Text". In the next article, we will learn to create a modal box (Like this)