MooTools Tutorials

  • By
    Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

  • By
    Implement MooTools Element.getSiblings()

    Update: I've added the "match" option to the getSiblings() method. While browsing through the open tickets at the MooTools LightHouse, I found this little gem proposed by SixtyMonkey: The above code grabs all sibling elements (the collection of alike elements minus the "found" one.) Do...

  • By
    MooTools TwitterGitter Plugin

    Everyone loves Twitter. Everyone loves MooTools. That's why everyone should love TwitterGitter, a MooTools plugin that retrieves a user's recent tweets and allows the user to format them however the user would like. TwitterGitter allows the user to choose the number of...

  • By
    MooTools Tip:  Adding Events During Element Creation

    One mistake I've made in the past with my MooTools elements is adding events to them after I've created and injected them into the page. An example of this would be: What you may not know is that you can add these events during the element...

  • By
    “Top” Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

  • By
    Create Snook-Style Navigation Using MooTools

    Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools. The Images These are the same...

  • By
    Duplicate the jQuery Homepage Tooltips Using MooTools

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using MooTools. The XHTML The above XHTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

  • By
    MooTools PulseFade Plugin

    I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery. The MooTools JavaScript Options of the class include: min: (defaults to .5) the...

  • By
    Implementing the Sizzle Selector Engine in MooTools

    jQuery creator John Resig released his Sizzle selector engine. MooTools rightfully opted not to use Sizzle for a variety of reasons: Sizzle currently offers no speed improvements over MooTools' current selector engine. (John Resig commented about this below.) The MooTools team would have to...

  • By
    Implement Array Shuffling in MooTools

    While shuffling the order of array elements isn't a greatly useful function, I recently found myself needing to accomplish the task. I found a great post about how to achieve this feat using jQuery. Here's how to implement array shuffling in MooTools. The MooTools...