MooTools Tutorials

  • Book Review: MooTools 1.2 Beginner’s Guide

    In the interest in full disclosure, I was sent this book by Packt Publishing in hopes that I would review it. I’m reviewing this book, however, in the interest of my audience.

  • Create Twitter-Style Dropdowns Using MooTools

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities — they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken some time to duplicate that functionality with MooTools.

  • Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item. MooTools NextPrev is a compact JavaScript class that allows you to move about a collection of items quickly using human terms.

  • “MooTools as a General Purpose Application Framework” by Christoph Pojer

    I wanted to bring attention to an outstanding presentation given by MooTools Core Developer Christoph Pojer.  Given at FOSDEM 2010, Christoph provides an overview of what MooTools is, who should use it, how it should be used.  Examples are given throughout the presentation. 

  • Create a Simple News Scroller Using MooTools, Part I: The Basics

    News scroller have been around forever on the internet. Why? Because they're usually classy and effective. Over the next few weeks, we'll be taking a simple scroller and making it into a flexible, portable class. We have to crawl before we walk though; let's make a simple news scroller using MooTools.

  • Create a Simple Slideshow Using MooTools, Part IV: Thumbnails and Captions

    My "Create a Simple Slideshow Using MooTools" series has been hugely successful. The first step was laying the groundwork for the slideshow, the second step was adding controls and events to the slideshow, and the third step was recoding the slideshow into a sexy class. This fourth slideshow tutorial will add thumbnail previews and captions to the slideshow.

  • NetTuts: Make Your MooTools Code Shorter, Faster, and Stronger

    My latest NetTuts tutorial has hit! From the post:

  • Create an Animated Sliding Button Using MooTools

    Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a Tympanus post which provided a great method for making button have an unexpected pop. Here's a quick tutorial on how to duplicate that look using MooTools.

  • Using MooTools ScrollSpy to Load More Items via JSON/AJAX

    Last July I wrote an epic dominant unbelievable fantastic outstanding awesome NetTuts post called Create a Twitter-Like "Load More" Widget Using CSS, HTML, JSON, and jQuery or MooTools where I used a MooTools/AJAX/JSON system for loading additional items when the user clicks a "Load More" link. The functionality is sweet but I see room for improvement. If a user scrolls down toward the end of the container, why not load more items for them automatically? Armed with the premier MooTools scrolling plugin, ScrollSpy, we can do so.

  • Introducing MooTools ElementSpy

    One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want — these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would be nothing without events. And think of DOM elements without events...terrible! Not knowing when someone clicked, hovered, etc. would completely defeat the purpose of JavaScript!