The Idiot's Guide to moo.fx

by Avinash Vora

Last updated on Friday the 17th of February, 2006.

UPDATE: I do not support this tutorial anymore! It's extremely outdated, and is not compatible with the current version of moo.fx--but, if you feel that this is helpful, you could try to find older versions that are compatible with this.

Table of Contents

  1. Updates
  2. Introduction
  3. Bare Necessities
  4. Smooth Operator
  5. Going Further
  6. Ending Notes

Updates

17th Feb - Second version of the tutorial. Updated the code. To note: this page does not use the Accordian feature.

16th Feb - First version of the tutorial.


Introduction

moo.fx is a super lightweight (3 kb) javascript effects library that can add snazz to any website with less than 5 minutes work. It is cross-browser (yes, IE too), fast and light, and does a marvelous job of making you look smart.

Let's face it, you want to use moo.fx to look cool. And cool you will look once you know what you are doing. By the time you finish reading this, you should have funky effects similar to what you can see at play here.

To really understand what is going to be shown, a basic to intermediate understanding in HTML is essential. CSS knowledge is a plus, and any javascript knowledge is going to be key to understanding what is going on behind the code, but for all intents and purposes, the majority of the code is just copy and paste goodness.


Bare Necessities

To begin, you are going to need a few things. Download the following:

  • moo.fx.js, prototype.lite.js (Get these from the moo.fx website)
  • A code editor, preferably with syntax highlighting.

You also (optionally) might want to look for:

  • A markup validator (W3C has the best)
  • Firefox + Web Developer Extension
  • A Javascript console (Web Developer Extension has a great one)

Once you've gotten everything you need (it isn't that much), it's time to start. Before you do anything with moo.fx, set up a good, compliant page to work with. The following is an example of an XHTML 1.0 Strict page, ready to be javascripted up:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <title></title>
</head>

<body>
        <div id="wrapper">
                <p>Lorem ipsum.</p>
                <div id="container">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
                </div>
        </div>
</body>
</html>

The code above sets up a basic skeleton for the page. Everything there is valid code, and this is important to keep in mind. Many times, errors that pop up are simply because you have invalid markup. Valid and semantic markup never hurt anybody.


Smooth Operator

It's time for the effects. You are going to make a smooooth sliding effect. Yes, that awesome looking one you see on this page. No it's not difficult.

Find the two ".js" files you acquired before. Decide where to place them. I keep them in the root of my directory, same level as the page I am working on. That way, I can call them simply by referring to their filename.

In the <head> section of your page, add the following:

<script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>
<script type="text/javascript">
        // This is where you will initialize your effects
</script>

The first two lines include the base libraries required for the effect that will be used. These two lines are essential, and the paths need to be relatively or absolutely accurate. The third section of Javascript will be where you initialise each effect you want to use.

Why don't we make a new effect to use? Put the following Javascript code in between the aforementioned tags:

// Initialise the effects
var containerHeight;

window.onload = function() {
        containerHeight = new fx.Height('container', {duration: 400});
}

The source is fairly self-explanatory for anyone with an hour's worth of Javascript under their belt, but for those less enlightened, window.onload is an event that occurs only when the page has loaded. This is the time when you want to be initialising things, which in our case are moo.fx effects. The second line is the basic declaration for creating a new effect. The basic syntax is as follows:

effectName = new fx.Height('idToAffect', {options});

Simple, right? The idToAffect is the HTML element you gave the id attribute to that will have the effect applied to it. In our original example, this was container. For the options, the only thing for now you should worry about is duration: timeInMilliSeconds.

I consider naming effects (or generally any variables in code) to be important. One method I frequently use is the one I used in the example. Using camelCase, I write the name of the id followed by the effect that I am creating.

To actually make the effect happen, you need to call the toggle() method of your new effect. A method is simply a function that is part of the object (our effect). A commonly used event is the onclick event. The following is a final listing of this entire code, with a working height effect:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <title>moo.fx Effects Test</title>
       
        <script type="text/javascript" src="prototype.lite.js"></script>
        <script type="text/javascript" src="moo.fx.js"></script>
        <script type="text/javascript">
                // Initialise the effects
                var containerHeight;           
               
                window.onload = function() {
                        containerHeight = new fx.Height('container', {duration: 400});
                }
        </script>
</head>

<body>
        <div id="wrapper">
                <p onclick="containerHeight.toggle();">Lorem ipsum.</p>
                <div id="container">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
                </div>
        </div>
</body>
</html>

Ta-da. You're done. It obviously isn't the most beautiful thing ever, but if you are reading this, then it is definately one of the cooler things you've worked on. Take the above code, style it and play with it until you are completely satisfied. Make more effects, create a whole page, whatever.


Going Further

moo.fx is much more powerful than what you've seen so far. Including fx.Height, there are three base effects in moo.fx.js:

  • fx.Height
  • fx.Width
  • fx.Opacity

They are self-explanatory. Using one over another is no additional work apart from recoding your effect initialization. Try them out; you should be more than capable by now.

Although the documentation (see link below) has a full listing of methods and options, I feel one method in particular is very useful: hide(). This method allows you to hide the element associated with your effect instantly. If called during window.onload, it will hide the effect before hand. So, if using an opacity effect, your element would start off completely transparent, and then when toggled, would fade in to view. This page uses the hide() method extensively.

moo.fx.pack.js is an extension of moo.fx, providing combined effects, cookie-based effects and more. It is still fairly tiny, weighing in at around 6 kb. It is more flexible and advanced, but with the base knowledge you know it shouldn't be too hard to conquer.

There are a few must-have resources that I would recommend to anyone:

Finally, don't give up. This is not an easy concept to start with, especially if you are new to programming all together. Look for the common mistakes: unvalid markup, missing semicolons (yes, even for onclick events) or misspelt names. Read the documentation and keep up to date with the new bug fixes. Practice does make perfect in the web design world.


Ending Notes

The code presented in this tutorial is free for you to use however you feel. Although not required, any credit would be greatly appreciated. Send me an email with your comments, questions, or to showcase your masterpiece. I don't claim to be an expert at Javascript, but ask nicely and I will try to help you.

The only place that you should be reading this document is on http://www.avinashv.net/tutorials/moofx/. You may not place this document on your own server. It will always be availible on the aforementioned link for free.

Congratulations on making it this far. I wish you the best in all your endeavours, and hope to see some funkier sites soon!