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 ;)
cool article! ty :)
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.)
tnx, as for class name, i will change it :)
mootools is best framework ever see
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:
And for your CSS:
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.
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.
Cool tutorial.
Though it would be nice to know which modules of mootools are required for this tutorial.
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
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?
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.
very good tutorial. thank you.
please, go on to write about MooTools.
@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.