Learning MooTools: 20 MooTools Tutorials and Examples

Jun 19 2008 by Jacob Gube | 19 Comments

There are literally over a hundred of JavaScript frameworks out there that make writing complex client-side code significantly easier. If you’re in the market for a powerful, relatively lightweight, and customizable JavaScript framework, MooTools is worth checking out.

To help you get on your way to developing highly-interactive web applications using MooTools, here’s 20 tutorials and working examples that’s worth a read.

Getting Started with MooTools

1. The "Mootorial"

The Mootorial - Screenshot

The Mootorial at //clientside is a comprehensive, practical tutorial on the MooTools framework. The tutorial allows you to execute the sample code either by Firebug or the website’s built-in console.

2. MooTools Overview Video Tutorial

Here’s an excellent screencast that introduces the MooTools framework. It covers the basics such as the concept of chaining, customizing MooTools to your needs, and where to find documentation for MooTools code.

3. Increasing User Experience With Javascript

Increasing User Experience With Javascript - Screenshot

Beauty By Design provides a nine-part video series on improving user interaction using JavaScript (primarily MooTools). A couple of topics covered in the lessons include: using mooTabs, creating sliding sub menus, and using Fx.styles to control font size.

4. Understanding Mootools Selectors

One of the most powerful features of MooTools (as well as other frameworks/libraries like jQuery and Prototype) is the ability to easily select page objects for you to work on. This tutorial covers the basics of selectors in MooTools: $(), $$(), $E(), and $ES() functions.

5. MooTools MooTools Classes: How to use them

This tutorial is an entry-level introduction on working with classes in MooTools. The tutorial works with a hypothetical scenario (buying a car from a car store) to illustrate the concept of classes. The last section of the article discusses the differences of MooTools and script.aculo.us classes.

Intermediate/Advanced Topics

6. Mootools: Ajax and XHR classes

MooTools’ Ajax/XHR classes provides developers a much simpler way of working with XMLHTTPRequests by reducing the amount of code you have to write and by handling browser differences for you. This tutorial talks about the Ajax and XHR classes in brief.

7. Ajax Responder in MooTools

This article delves into the use, extension, and capabilities of the Ajax class in MooTools. It discusses chaining Ajax requests and events, and how you can extend the Ajax class for your needs (also applicable to other MooTools classes).

8. How well do you know Mootools?

Getting started with MooTools is easy, and it won’t be long until you can create wonderful effects and increase user interactivity in your web pages. To help you become a MooTools master, here’s a checklist of common coding mistakes and its corresponding correct usage.

9. Mootools Short-cuts

This is a follow-up article from the one above, focusing more on MooTools syntax usage. Examples involve using shorter code for selection of objects, shorthand for the Ajax class, and creating new elements.

10. Mootools: JSON explained

Mootools: JSON explained - Screenshot

Here’s an excellent introduction to using JSON with MooTools to provide server-side interaction to your web applications. Topics covered include converting a JSON string into a JavaScript object and vice versa.

11. Using MooTools’ Hash.Cookie API

This article explains how to take advantage of MooTools’ powerful Hash.Cookie API to make working with complex cookie utilization a cinch. The example showcases a working example of how you can store the number of times a user visits a page.

12. Chaining with MooTools 1.2

Chaining is beneficial for several reasons including the ability to sequentially execute events ("in a chain") as well as reduce the number of lines of code you have to write. If you’re wondering about the "who, what, where" of chaining in MooTools, check out this brief but informative tutorial.

Practical/Working Tutorials and Examples

13. AJAX mootools secure contact form

AJAX mootools secure contact form - Screenshot

Learn how to protect your public web forms from spam and SQL injections with this tutorial on how MooTools can be used to make safer public web forms.

14. Using CSS and Mootools to simulate Flash horizontal navigation effect

Using CSS and Mootools to simulate Flash horizontal navigation effect - Screenshot

Create a navigation area that smoothly scrolls left or right depending on where you hover your mouse.

15. Facebook Sliders With Mootools and CSS

Facebook Sliders With Mootools and CSS - Screenshot

Check out this nifty tutorial on how to build a Facebook-inspired set of slider controls that manipulate the opacity, width, and height of an image.

16. MooTools Gone Wild: Element Flashing

MooTools Gone Wild: Element Flashing - Screenshot

In this tutorial, you’ll learn how to make page elements flash. It’s an effective way of drawing attention to a particular section of a web page or alerting users of status changes.

17. Nice Ajax effect for message box using Mootools

Here’s a tutorial on how to display messages that fades in after the user clicks on the submit button. It’s designed for use with web forms, but it can be modified into similar applications.

18. Two CSS vertical menu with show/hide effects

Two CSS vertical menu with show/hide effects - Screenshot

This tutorial shows you how to build a navigation menu that slides up and down smoothly using MooTools. The article also covers how to make a similar effect using plain JavaScript.

19. Mootools Content Slider With Intervals

Mootools Content Slider With Intervals - Screenshot

Here’s an excellent step-by-step tutorial on how to make a content area that slides left-to-right at set intervals – great for slideshows.

20. Jazz Up Your Forms With MooTools

Jazz Up Your Forms With MooTools - Screenshot

This is a two-part series that goes over how to make your web forms fancier. The first part shows you how to add animated field highlighting and how to display instructions to users. In the second part, you’ll step it up a notch by adding live comment previewing and auto-resizing of text areas.

Have you got your own personal MooTools resources to share? Got an interesting MooTools application you want to show us? Talk about it in the comments!

If you found this article useful, you might also want to read:

19 Comments

Peter

June 20th, 2008

Excellent Resources..Thank you

Pierro

June 20th, 2008

Yeah, nice resources -> DIGGED

An Jay

June 21st, 2008

Nice list! Thanks for sharing here

Farhad Dizeyi

June 21st, 2008

Thank you for this great tutorials and examples… It really makes it easy to understand the mootools framework. I searched the web for tutorials about mottols and found some but this one is really the best one I found. Appreciative.

Regards
Farhad Dizeyi

Rasmus

June 22nd, 2008

Too bad that the material found under most of the links listed relates to mootools v1.1 and not the freshly released v1.2 :(

$E and $ES have been removed just as an example.

rborn

July 2nd, 2008

here are several mootools tutorials for begginers. Even somehow outdated, are very simple explained, and very easy to follow

http://cssgallery.info/category/mootools/

ryan

July 2nd, 2008

Thanks for the MooTools tutorials .. just launched our new portfolio site with some cool ajax navigation at http://www.greyemea.com, made loads of use of Mootools, but there seems to be issues with ie6. Has anyone else found a way to overcome the issues?

Jacob Gube

July 2nd, 2008

@ryan: what are the issues exactly?

PluT0

July 24th, 2008

anybody know example or tutorial on mootool which integrated with RoR?

Posicionamiento Valencia

August 18th, 2008

A good start to mootools.

Boby Thomas

April 10th, 2009

excellent post. keep it up.

Abdel

May 4th, 2009

mootools never been explained any better. heads up.Thanks a lot.

aartiles

June 4th, 2009

Nices resources, i decided to moved from Prototype to mootools, i love mootools.
Check my last effect plugin: http://www.flash-free.org/en/2009/05/28/e24bubblefx-photo-bubble-transition-effect/

x13

June 4th, 2009

About the tutorial #13 “AJAX mootools secure contact form”. It is a good tutorial to learn about mootools but NOT to improve your website security. That kind of sanitization have to be done in the server side, not in the client web browser. An attacker can use his/her own form and submit a specially crafted string without any restriction and compromise your website or your database with a XSS vulnerability or a SQL injection vulnerability.

Regards

Chris

June 5th, 2009

Thats a great list! I will refer to this from now on :>

Antony

June 25th, 2009

Tutorials here are great although i know nice mootools AJAX tutorial:
http://solutoire.com/2006/11/29/mootools-the-ajax-class/

Ryan Gliozzo

July 16th, 2009

thanks! I am struggling to learn about mootools. I have managed to implement easyslide 1.5 on my site, and modify it. This resource is helping me learn.

Frank

July 16th, 2009

Concerning the moo secure form – the checks for fraudulent input is done by a) client side and b) server side – as we are aware of client side checks are insecure :)

The script should only show how to deal with inputs and firing events in mootools.

Deepak

February 13th, 2010

Very Useful list! Thanks for sharing. Can you tell me a way of converting static transitions of webpages into sliding effect with the help of MooTools. I have an example of a website (http://www.mimeartist.com/) which used MooTools as well but the whole code is in one file except css and js file but I want this effect on different pages linked to the navigation menu on the index page. Hope you will give me some solution. Thanks

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences.

Mobify