Cult-Foo

Simple tutorial for MooTools usage

Tags: ,

mootools

Hi all. Today we will learn a bit about great javascript framework called MooTools. It’s ultra small and ultra fast :)

In this tutorial we will work with small table. Our task is to implement simple model of behavior – when our mouse is over one of cells, it will be colored in pink, other become gray. Simple, isn’t it?

In result we will get such table. Try to move mouse over it.


Ok, lets start.

First common problem for beginners is how to determine when DOM model is fully loaded. With MooTools its simple as 1,2,3

window.addEvent('domready', function() {
	alert('Dom model is loaded');
});

And thats it. Inside this function you can call any other code and you can be sure, that it runs properly.

Next task is to switch classes for active and inactive cells. To do this, we will use

element.setProperty('property-name', 'class-name' )

Of course we could use

element.addClass('class-name' )  & element.removeClass('class-name' )

or even

element.className = 'class-name'

but we will use setProperty , because it is easier to use one command to change element class from one to another instead of two, and of course because its mootools native method.

Ok, so now we know when DOM model is loaded and how to change class for certain cell. But we need to change class for all cells in a table. So we need to get it into array somehow.

MooTools has a number of very helpful functions for this case.
To make our life a bit easier, give our table id=”testTbl”.
Now pay ATTENTION!!! Complex thing :)

td_array = $$('#testTbl td');

And we have all td items in array. Lets explain it a bit. $$() function used when you need to collect some items from DOM what meet some conditions. “#testTbl” – means to get all items with id=testTbl. “#testTbl td” means to get all TD items inside all items with id=testTbl. I use only one of selectors. More can be found at docs.mootools.net. By the way i like the way guys organized their help.

Ok, back to our table. We miss only one feature to get things working. We need to attach functions to ‘mouseover‘ & ‘mouseout‘ events of each TD element in our table.
We can do this with help of such function:

element.addEvent('event', function() );

Now we have all pieces of puzzle. To organize it nicely, i suggest to use a Class. Create new class using MooTools is simple too. Am i using word ‘simple’ too much :) ?

var new_class = new Class({
	some_property : [],
	initialize: function() {
	},
	some_func: function() {
	},
	.
	.
	.
	some_func: function() {
	}
});

And here is the code

window.addEvent('domready', function() {
	table = new tableEffect();
});

var tableEffect = new Class({
	td_array : [],
	initialize: function() {
		//get all td inside our table
		this.td_array = $$('#testTbl td');
		this.td_array.each( function(td) {
			  td.addEvent('mouseover', this.table_colorize.pass(td, this) );
			  td.addEvent('mouseout', this.table_normalize.pass(td, this) );
		  },   this );
	},

	table_colorize: function(td_hover) {
		this.td_array.each(
		function(td) {
			td == td_hover ? td.setProperty('class', 'cell-hover' ) : td.setProperty('class', 'cell-other' );
		}
		);
	},

	table_normalize: function(td) {
		this.td_array.each(
			function(td) { td.setProperty('class', 'cell-regular' ); }
		);
	}

});

Some explanations.
td_array – contain all td elements of our table. Used in class functions, so i decide to make it class property.
initialize – run when our class created, init td array and bind functions to events.
table_colorize – function used to select active cell and gray others
table_normalize – back to our table with white bg

If you are new to javascript, you could be confused by using word “this” in this code

this.td_array.each( function(td) {
			  td.addEvent('mouseover', this.table_colorize.pass(td, this) );
			  td.addEvent('mouseout', this.table_normalize.pass(td, this) );
		  },   this );
);

But i think it would be too much for the first tutorial.

P.S. : As you noticed, english is not my native language, so you give me a lesson ;)

Managed WordPress Hosting

Did you like it? Help us spread the word!

12 Responses to "Simple tutorial for MooTools usage"

  1. java_man says:

    cool article! ty :)

  2. Ryanmr says:

    Looks Great :D
    I recommend though that you make your class name like, tableEffect, since all lowercase is kinda strange, otherwise, it’s great!
    (By the way, I love your site.)

  3. elPas0 says:

    tnx, as for class name, i will change it :)

  4. alex says:

    mootools is best framework ever see

  5. WanderLust says:

    Cool tutorial, although that seems like a lot of work to just color in the <td> elements.

    td:hover is not entirely an option because it is unsupported in Internet Explorer, but how about just putting in an <a> element? That would be problematic if you wished to place block elements inside the <a> element though. But if you’re going to be placing inline elements inside the <td>, try this out:

    <table class="interactiveTable">
      <tr>
        <td><a>Content</a></td>
      </tr>
    </table>

    And for your CSS:

    .interactiveTable a:hover {background-color: #f06}
    .interactiveTable a{background-color:#eee}

    Unfortunately, by doing this you are not achieving the effect that the table turns to gray after the mouse is placed in one of the cells, but you are cutting down on a lot of over-head and ensuring that visitors without Javascript are able to see your website properly.

  6. WanderLust says:

    Here’s a method of doing what I just described without the <a> tags, but it will most definitely not function in crummy Internet Explorer.

    .interactiveTable{background-color: #fff}
    .interactiveTable:hover{background-color:#aaa}
    .interactiveTable td:hover{background-color:#f06}
  7. Chris says:

    Cool tutorial.

    Though it would be nice to know which modules of mootools are required for this tutorial.

  8. elPas0 says:

    to WanderLust – the purpose of this tutorial is not to use css, but use javascript to reach the target, although your method is really simple and fast
    to Chris – Core, Class, Array, Element, Element.Selectors, Element.Event, Window.Domready – i could forget smth, but i think its full list of modules

  9. cchana says:

    Good tutorial, but as mentioned above, it could be done with CSS.

    if you’re going to use an external javascript library, why not use the htc hack which makes IE read the pseudo-class :hover correctly?

  10. WanderLust says:

    Yeah- I have no qualms with doing it in Javascript- in fact, it’s probably the best way to do it given that the programmers at Microsoft can’t seem to do anything properly.
    Hey as long as it degrades gracefully and maintains all functionality, it’s good.
    My hosting provider has a control panel log in page where you can’t log in without Javascript enabled- Silly.

  11. eburhan says:

    very good tutorial. thank you.

    please, go on to write about MooTools.

  12. Bas says:

    @WanderLust: I don’t think the purpose of this tutorial is to show how to make coloured table cells on hover, it’s about showing how easy it is to use Mootools.
    This is a good example and nicely shows how to make a class.

Trackbacks/Pingbacks

Do you have something to say?