MooTools Tutorials

  • By
    Peppy and MooTools

    This post has been updated after more tinkering and testing. A while back James Donaghue boasted his new selector engine Peppy. Lets say for giggles that we wanted to use MooTools and Peppy together. Here's how I got things to work. The JavaScript I have no...

  • By
    AJAX Page Loads Using MooTools Fx.Explode

    Note: All credit for Fx.Explode goes to Jan Kassens. One of the awesome pieces of code in MooTools Core Developer Jan Kassens' sandbox is his Fx.Explode functionality. When you click on any of the designated Fx.Explode elements, the elements "explode" off of the...

  • By
    Animated AJAX Record Deletion Using MooTools

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript. The PHP - Content & Header The following snippet goes at the...

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

  • By
    Implementing jQuery-Like Event Syntax in MooTools

    If you take a peek inside the MooTools core Element/Events source code, you'll see the following collection of events: As you probably know, in order to add an event, you need to code something similar to: In jQuery you code something like: I don't prefer that syntax but if...

  • By
    google.load():  Utilize Google’s AJAX Libraries API

    The problem: loads of websites around the internet using the exact same JavaScript file. The file is a whopping 100KB in size. Since this same file resides on each website's server, the file is downloaded and cached for each individual website. Lots...

  • By
    5 Great MooTools Plugin Resources

    One of the strengths of the MooTools JavaScript library is that the code is so flexible. This flexibility allows almost anyone to download the core and create plugins to their heart's content. Why reinvent the wheel if you don't have to though? Check...

  • By
    MooTools: Set Style Per Media

    I'd bet one of the most used MooTools methods is the setStyle() method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools' setStyle() method is that it sets the specific style for all medias.

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

  • By
    Twitter: @mootools

    I've followed @jquery now for quite a while. Though I spend most of my time with Moo, it's good to keep up with the other frameworks and see what I can gain from their ideas. Even if you're a MooTools dev, I'd recommend throwing...