CSSgallery.info

In previous tutorial we learned how to add events to elements in webpage. In this one we will learn how to select elements - or better said how to access an element from page, and how to create new elements in page.

In mootools we have two functions that select an element:

function $ - this is equivalent of document.getElementById and returns the object selected.

if we have an element with id = ‘my_element’, the expression $(’my_element’) will return that element, then we will be able to manipulate it.

and function $$ - this one allows you to select multiple objects, and return an array with selected objects.

$$(’a') will return all the ‘a’ elements in document.

A nice trick done by $$ is that you are able to select all the elements with same class:

$$(’.my_class’) will select all the elements in page that have class=’my_class’.

The creation of an element is done by declaration:

var my_element = new Element( type , { options }) ;

Let’s explain a little:

type - define the type of the element, for example img, li, input, div, etc..

options - this lets you specify at the moment of creation the attributes the new element has.

options is not mandatory, the equivalent html code being - let’s say for div - “<div></div>”

An example:

var my_img = new Element ( ‘img’ , { ’src’ : ‘aa.jpg’ , ’style’ : ‘width:200px; border:3px solid red’ }) ;

As u see, we create an img element and we set the src as aa.jpg and the style as above. Please note the way options are declared:

{attribute: value , attribute:value}

so pairs of attribute:value coma separated.

Ok, now we have the element my_img, but is not yet viewable. The new created element exist in browsers memory, but is not inserted yet in page. For this we need to use one of:

injectBefore( element) ;

injectAfter(element);

injectInside(element);

injectTop(element) ;

Remember the selectors we explained at the beginning of this tutorial? The element object is exactly an object select using $, or created previously,using new Element();

What each inject does?

injectBefore( element) ; - injects the new created element just before the passed element;

injectAfter(element); - injects the new created element just after the passed element;

injectInside(element); - injects the new created element inside the passed element, at the bottom. Be carefull you have to pass an element that support subelements - you cannot insert an ul in an img for example
injectTop(element) ; - injects the new created element inside the passed element but at the top.

Take a look at the example page , and in source to see practical implementation.

Is official

You can now submit news, articles, tutorials or whatever is related to webdesign and webdevelopment.

You can do this on Submit news page.

Anyway, your post will be moderated before being displayed, so please submit only relevant news.
Promoting your own articles is allowed and welcomed but the quality of the posts will be accepted only if we consider to.

Thank you

We will try to make a little set of tutorials how to use mootools framework for almost absolute beginners. You will need to know basic javascript. The documentation for mootools framework is a little hard to understand and requires more advanced javascript knowledges.

But…… every webdesigner (and of course beginners first) wants a hassle free solution that works with less effort. So let’s start

How to add events to elements in a webpage using motools ?

First of all a small explanation on events. What are events?.

Events appears when something is happening in the page we visit, like a mouse click, a key pressed or anything else might be an interaction from user with that page, or some “special” events like “domready”, “load”, or “unload”.

First category are simple to understand - the user makes something on page.(click, mousemove,press a key)

To be able to manipulate the elements of a page we need them first loaded. Here comes second category, where we will use more “domready” and “load”. The difference between those two is how they occur: domready is triggered when all the document structure is loaded, and load when all the content is loaded.

If we consider as example a page with 4 huge images - let’ say 2.5M each - the time difference between those two events can be for example 10 sec, because the structure (DOM) of the document is loaded almost instantly, but the content of the images is loaded in time depending on our internet connection speed. So we can use domready to start executing our script, without needing to wait for all the content to come.

The addEvent method in mootools has the next declaration:

element.addEvent( event, function to execute);

element - one element of the page obtained using a selector like $(’my_element’) which is the equivalent of document.getElementById(’my_element’), or a previous created element.

Also ‘document‘ can be used, and will be for domready or load events.

event - one of the events, that suit to the type of element we have - click, change, domready, etc

function to execute - a function to execute, declared previously or here

Here is a catch.

If u predeclare the function, u will need to use addEvent like this:

function my_function() { alert(’test’) };

$(’my_element’).addEvent(’click‘, my_function);

If u want to declare the function inside of addEvent, you must specify is a function, like this:

$(’my_element’).addEvent( ‘click‘ , function { alert(’test’) } );

Now, in a page, to do this, you have two ways:

First is to add the script that attach the click event to $(’my_element’) at the end of the page, so the element exists, or to use the domready event, to attach the event while the content of images in page is loading.

Something like this:

document.addEvent( ‘domready‘ , function() {

$(’my_element’).addEvent( ‘click‘ , function() { alert(’test’) } );

} );

Please take a look at the example, and example source for a clear working example.

I am waiting for your comments, improvement, or corrections :).