MooTools Tutorials

  • Moo 1.2 is Coming…

    I've been following the progress of MooTools 1.2 for months and it looks as though we'll see the next version relatively soon. As excited for the next version as I am? Here a few links to get you up to date on the project's status:

  • MooTools Documentation in PDF Format

    Trolling through the MooTools forums, I stumbled on a post by DigiMute. DigiMute has automated complete MooTools documentation in PDF format using PHP and FPDF . If you hate referring to the MooTools website every time you need API help, download the MooTools documentation in PDF format!

  • Moo Fight!

    Well, not really. But the guys at AJAXian forgot to include MooTools in a JavaScript framework survey, someone claimed to post as a MooTools dev, flamed everybody, the REAL MooTools devs posted, and people got upset.

  • 6 Reasons To Use JavaScript Libraries & Frameworks

    I've seen many articles around the internet from JavaScript fundamentalists that advocate writing your own JavaScript code instead of using JavaScript frameworks like MooTools, Prototype / Scriptaculous, jQuery, MochiKit, YUI Library, and Dojo Toolkit, and I just cannot agree with their reasons for not using these spectacular frameworks.

  • Fluid Anchors – Smooth Anchors Using MooTools

    While we as programmers get more used to using AJAX and advanced JavaScript frameworks, we can only assume that our users will. At one time, it was acceptable to have elements dynamically just "pop into" the screen but now we must strive to make the experience smoother for our users. That's why MooTools has put a big focus on the "Fx" part of their framework.

  • MooTools Image MouseOvers – Cleaner JavaScript Code, Less Hassle

    Creating mouseover code can be a real mess but using MooTools I put together a solution that saves me time and keeps my code super clean. There are some practices that I use with my theory. All "mouseover" versions of the image end in "-mo". For example, sugar.jpg is the standard image while sugar-mo.jpg is the mouseover version. Also, I use a CSS class mo to identify which items have mouseovers. I also stick to one file extension and assume that the mouseover image's file extension is the same as the original file's extension.

  • Advanced CSS Printing – Using JavaScript Double-Click To Remove Unwanted DIVs

    Like any good programmer, I'm constantly searching around the internet for ideas and articles that can help me improve my code. There are thousands of talented programmers out there so I stumble upon some great articles and code snippets that I like to print out and use at a later time. The most disappointing part of finding a great article is seeing the printed result — many times the article is unreadable and thus gets relegated to scratch-paper duty.

  • Advanced CSS Tables II – Using Mootools JavaScript For Alternate Row Colors

    As I discussed in Advanced CSS Tables - Using CSS3 For Alternate Row Colors, we will eventually be able to use the ":nth-child(argument)" pseudo-class in CSS3 to provide alternate row background colors. What do we use in the mean time? You can explicitly code your page using CSS classes to do the job, but that's far too painful if you aren't using server-side scripting. Even if you do use server-side scripting, your page could become quite bloated from rows and rows of "class='color-me'" in your code. I've put together a very simple MooTools snipped that will save you lots of programming time and download time for your users.