After a lot of requests, in this article I want to illustrate some simple tips to start to work with
MooTools. In this first lesson you can see how to manipulate element properties, in particular how to get DOM element by ID, how to use
getStyle(),
setStyle() (to get and set CSS properties),
toInt() to convert string to number and some examples to introduce how to write
unobtrusive JavaScript code with MooTools.
1. Add Mootols framework to your pageFirst, you have to download the latest version of
MooTools and add a link to the framework within the
<head> tag of the page:
Copy and paste the following code within the <head> tag:
<script type="text/javascript" src="mootools.svn.js"></script>
Ok, now you are ready to use MooTools feautures in your web pages!
2. Get DOM elementTo get a
DOM element by ID you can use the following syntax:
var element = $('myElement');
... this line of code gets the element with ID="
myElement" in your page. If you have some falimiarity with JavaScript, it's almost the same thing to get a DOM element
by reference using the following code:
var element = document.getElementById('myElement');
Ok, now using
$$ you can get an array of elements within a DOM element with a specific ID:
$$('#myElement li.myListElement');
...for example, this line if code returns an array of all
<li> tags with the class="
myListElement" within the DOM element with ID="
myElement".
3. setStyle() and get Style()These are two basic methods to
set and
get element properties (height, background, color...). To set a property you can use the following code:
$("myElement").setStyle("height", "200px")
...or if you have to set multiple properties you have to use the following code:
$("myElement").
setStyles({background: "#DEDEDE",
border:"solid 1px #999999",
width: "700px"
height: "80px"
}); To
get a property you can use
getStyle() specifying the property you want to get (height, background, color...):
$("myElement").getStyle("height")
The previous code returns the height of the DOM element with ID="myElement", for example
"200px". If you want the number (
200 and not the string
"200px") you have to use the following code:
$("myElement").getStyle("height").toInt()
...in this way the value returned will be a number (
200).
4. Unobtrusive JavascriptNow, we can start to see how to write unobtrusive Javascript code using MooTools in order to separate page content from JavaScript code. Your have to use the following code:
<script type="text/javascript">
window.addEvent('domready', function() {
//Some lines of code here...
});
</script>
For example I want to write a simple script which display an alert with
"Hello World!" when an user click on a link with ID="
myElement". The script is:
<script type="text/javascript">
window.addEvent('domready', function() {
$('myElement').addEvent('click', function() {
alert('Hello World!');
});
});
</script>
...and HTML code is:
<a href="home.html" id="myElement">
Try to click here!
</a>
...instead of an "
obtrusive" code with
onClick event which calls a function (for example
doSomething()) added within the
<a> tag:
<a href="home.html" id="myElement" onClick="javascript:doSomething()" >
Try to click here!</a>
Example 1: change background colorOk, now we can try to write a simple code which change the background color of a layer with ID="myLayer":
HTML code is something like this:
<div id="myLayer">
<a href="#" id="myElement">Change Background</a>
</div>
...how you can see, you don't call a JavaScript function using an event (
onClick,
onFocus...) within
<a> tag. The reference to the DOM element "myLayer" will be insert into the following script which you have to add below the link to the MooTools framework in the
<head> tag (
step 1):
<script type="text/javascript">
window.addEvent('domready', function() {
$('myElement').addEvent('click', function() {
$('myLayer').setStyle('background', '#DEDEDE');
});
});
</script>
Example 2: change and reset background colorNow we can modify the previous code and make it a little bit more complex. In this example when an user clicks on "Change Background", if the background colors of the layer with ID="
myLayer" is not set, then the script sets the background color of the layer to this value
"#DEDEDE"; else, the script set the background color to null.
HTML code is the same of the previous example:
<div id="myLayer">
<a href="#" id="myElement">Change Background</a>
</div>
... but I changed something in the script:
<script type="text/javascript">window.addEvent(
'domready',
function() {$('myElement').addEvent
('click',
function() {var currentBgColor = $('myLayer').getStyle('background');
if(currentBgColor==''){
$('myLayer').setStyle('background', '#DEDEDE');
} else {
$('myLayer').setStyle('background', '#FFFFFF');
}
}); });</script> 
Download source codeHow you can see the code is very simple. Now you can start to write more complex functions to manipulate element properties. In the next lesson we we'll see how to interact with Forms using MooTools.
Do you have some suggest? Add a comment!
Take a look at 
Eduardo Sada
Are you looking for new interesting fonts? This is a list of my preferred Handwritten fonts I often use in my design projects. I included a link to download each font apart and some suggest about how you can use them.
