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:
●
●
●
●
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. Oneof the best places to learn web programming isW3Schools; they have a tutorial on Javascript,including hundreds of examples. You can find ithere. If you'd like a bit more help withJavascript, check outPageTutor's Javascript Tutor .When you're ready to begin implementing Mootools into your Joomla! project, browsetheMootools demosto discover what it is you wish to implement. All that you see at theMootools 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” button2)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 thebutton. Find a word or phrase in your articlethat 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 templatewaits until the page is ready for modification (
'domready'
). When that happens, it creates anew
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 theuser, 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 tothe user. Because the ToolTip is just another HTML element, it is possible to put anything intothe 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 (instructionshere), 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 onif 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 linksinside the boxes (e.g. “Joomla! Home”). Both of those variables are
arrays
, which are simplylists of data.Some of the navigation boxes don't have titles. If they don't have titles, and they wereput into the accordion, there would be no title to click on in order to view the links...It would bea huge mess. To counteract this, we loop through everything in the
elements
variable, andcheck that the HTML tag behind the element exists. If it does exist, we just move on to thenext 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
): theindex, or number in the
elements
array where something is stored, and the number of indexesto 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 onlywant to remove 1 index.If we delete an index from
elements
, we must also subtract 1 from
i
. If we don't, it willskip 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 1Element 2Element 3Element 4
Element
3
is then removed. Element
4
is moved to where element
3
used to be, and isthen known as element
3
.
Element 1Element 2Element 3 4
So, if we don't subtract 1 from
i
, it will be checking the nonexistent element
4
. I hopethat helped you understand arrays a bit better!Once we've looped through all of
elements
, we finally create the Accordion. The firstargument is
togglers
and the second is our filtered
elements
.
Search History:
Result 00 of 00
00 results for result for
p.
Joomla! v 1.5 Mootools Tips and Tricks
By Zach Kanzler (theY4Kman)
Google Highly Open Participation Project
Joomla!
Google Highly Open Participation Project
Joomla!
143.5K
Reads
102
Readcasts
26.4K
Embed Views
Recommended
More From This User
Notes
Load more
