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"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
   <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>

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(){

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.
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 | Idaho Web Design