You are on page 1of 3

Mootools Tips and Tricks

To begin using Mootools in your Joomla! project, start with the right environment: First,
use the web browser Firefox (getfirefox.com). Firefox has many plugins and extensions,
making development easier. Once Firefox is running, install these extensions:
● Firebug
● Web Developer
● Noscript (Optional)
● FireFTP (Optional)
*Note: In order for the extensions to execute, you will have to restart Firefox

Now that your debugging tools are setup, you may move on to the actual scripting. One
of the best places to learn web programming is W3Schools; they have a tutorial on Javascript,
including hundreds of examples. You can find it here. If you'd like a bit more help with
Javascript, check out PageTutor's Javascript Tutor.

When you're ready to begin implementing Mootools into your Joomla! project, browse
the Mootools demos to discover what it is you wish to implement. All that you see at the
Mootools site is possible in Joomla!

To showcase one possibility, we'll use the Tips plugin of Mootools to create mouseover
hints for certain words on the page. Here are the steps:
1) We'll use the Joomla! template editor to add in our script:
1) Login to the administration section.
2) Hover over the Extensions link in the navigation, and select “Template Manager”
3) Mark the template you're using, and click the “Edit” button in the top right corner.
4) On the next page, click the “Edit HTML” button
2) Find the line that contains </head> and paste this code above it:
<script>
window.addEvent( ”domready” , function( ){
var abbrTools = new Tips( $$( ”abbr” ) );
}); </script>
3) Now, write an article on whatever your mind can think up; be it your mom, your house,
or a piece of lint in your sock.
4) Switch to HTML view by pressing the button. Find a word or phrase in your article
that you want to point out. Around it, wrap <abbr> tags, like so:
<abbr>something interesting</abbr>
In the <abbr> tag, put a title attribute in it, which will serve as the body of your ToolTip:
<abbr title=”Yes, this is very interesting!”>something interesting</abbr>
5) Post the article and hover your mouse over the words you selected. Voilá!

How does it work? (This is a bit more advanced than copying and pasting, so only read
on if you feel very comfortable with Javascript) Well, the script you added into the template
waits until the page is ready for modification ('domready'). When that happens, it creates a
new Tips object. We supply that Tips object with all the <abbr> tags in the page.
Then, Mootools does all the work. After creating the ToolTips and hiding them from the
user, it watches all those <abbr> tags, waiting for the user to hover their mouse over one of
them. If the user's mouse happens to move over a tag, Mootools makes the ToolTip visible to
the user. Because the ToolTip is just another HTML element, it is possible to put anything into
the ToolTip...images, Flash animations, or more HTML tags!
Next, we'll demonstrate a simple Accordion. In this example, we'll change the sidebar
navigational boxes into expandable modules. Just follow the steps!
1) Using the Joomla! template editor (instructions here), add this code just above the
</head> tag:
<script>
window.addEvent(”domready”, function( ){
var togglers = $$( ”.module_menu h3” );
var elements = $$( ”.module_menu ul.menu” );
for( var i = 0; i < elements.length; i++ ) {
if(elements[i].previousSibling.previousSibling == null){
elements.splice( i, 1 );
i--;
}
}
var navAcc = new Accordion( togglers, elements );
});
</script>
2) Voilá! Now your navigation is an accordion!

How does all this coding work? (Again, this can get pretty far in depth, so only read on
if you feel fully comfortable with Javascript) Like the Tips example, this waits for the event
'domready' to trigger. At that point, it makes two variables: togglers, which holds the titles of
all the navigation boxes (e.g. “Key Concepts”), and elements, which holds the lists of links
inside the boxes (e.g. “Joomla! Home”). Both of those variables are arrays, which are simply
lists of data.
Some of the navigation boxes don't have titles. If they don't have titles, and they were
put into the accordion, there would be no title to click on in order to view the links...It would be
a huge mess. To counteract this, we loop through everything in the elements variable, and
check that the HTML tag behind the element exists. If it does exist, we just move on to the
next element. However, if it doesn't exist, we remove it from elements with the function
splice().
splice() takes two arguments when deleting elements from an array (elements): the
index, or number in the elements array where something is stored, and the number of indexes
to delete. We supply it with the variable i, which holds the index of the HTML tag in the
elements variable currently being checked. Next, we give it the number 1, because we only
want to remove 1 index.
If we delete an index from elements, we must also subtract 1 from i. If we don't, it will
skip right over one index in elements. It's a bit tough to comprehend, so I'll give you a better
explanation: If we're checking index 3 in a 4 element array:
Element 1 Element 2 Element 3 Element 4
Element 3 is then removed. Element 4 is moved to where element 3 used to be, and is
then known as element 3.
Element 1 Element 2 Element 3 4
So, if we don't subtract 1 from i, it will be checking the nonexistent element 4. I hope
that helped you understand arrays a bit better!

Once we've looped through all of elements, we finally create the Accordion. The first
argument is togglers and the second is our filtered elements.
After those two examples, it's time to let you roam free. But just in case you're still
scratching your head, wondering what to do, here are some ideas:
● Use Tips to show descriptions for all the links in the navigation. Tips Documentation
● Using Fx.Morph, create a link on the front page that turns articles into larger forms,
letting the user easily and quickly access and read them. Fx.Morph Demo
● With Sortables and Resizable, allow the user to resize and move the sidebar boxes
around. Sortables Documentation and Resizable Documentation.

You might also like