Learn Mootools - AHFX

Basic Actionscript - Introduction to Classes 

ahfx Mootools learning Mootools

AHFX Mootools Home
Basic Mootools
Contact AHFX
 
 
 
 

Mootools 1.1 Basics

  1. Download Mootools - Click here to download the packed version that we will be using in our tutorials.
  2. Now create the following folder/file structure:
    • Website Root Folder
      • mootools (folder)
        • mootools-release-1.11.js
        • custom-mootools.js
      • firstpage.html
  3. In firstpage.html type this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Your title</title>
   <script type="text/javascript" src="mootools/mootools-release-1.11.js"></script>
   <script type="text/javascript" src="mootools/custom-mootools.js"></script>
 </head>
 <body>....</body>
</html>

Click here to view working code.

Now that doesn't really do much for us, so let's write our first mootools script. Open your custom-mootools.js file and add the following code:
window.addEvent('domready', function(){
  $$('a.red').each(function(link){
    link.setStyle('color','red');
  });
});

Click here to view working code.

While this code might look scary, all it really does is loop through the "a" tags that have a class of red in a document and add a style to the tag of color:red;. See that wasn't hard at all.

Now let's say that you wanted to have the color change after something happened, like say a person clicks a button. We'll update our code like this in our custom-mootools.js script:
If this FREE tutorial helped you at all, please consider clicking on a link to help support this site.
---OR---
Donate to the cause by sending us an Amazon Gift Certificate.
Click Here to Send an Amazon Gift Certificate to info@ahfx.com

 


 

Creative suite generic 125x125

Featured Tutorials


 
AH Digital FX Studios
Disclaimer | Site Map | Idaho Web Design