MooTools Archives

Track Clicks Outside Active Elements with MooTools or jQuery

Published by David Walsh on Thursday, March 18, 201018 Comments

Buried in the MooTools and jQuery code from my Twitter Dropdowns posts was a small but useful snippet of code: hide an “active” element when the user clicks outside of the elements.

Twitter Dropdown Menu

Take a look at the image above. When you click the “Menu 1″ button, the dropdown menu displays. Both the buttons and dropdown are wrapped in a DIV. When the menu gets activated, that wrapping DIV (or “parent”) is stored in a variable. For each dropdown, we add an event to the body to check where the user clicks. The following snippet explains what happens next.

Create a Quick MooTools Slideshow with Preloading Images

Published by David Walsh on Wednesday, March 17, 20109 Comments
David Walsh Slideshow

I’ve been creating a lot of slideshow posts lately. Why, you ask? Because they help me get chicks. A quick formula for you:

var numChicks = $$('.slideshow').length; //simple!

The following code snippet will show you how to create a simple slideshow with MooTools; the script will also preload the images and feature a progress message. Why preload images? They make the slideshow more elegant and you can avoid an onLoad mess. Oh, and chicks…loads and loads of chicks.

The HTML

<div id="slideshow-holder">
	<div id="progress"></div>
</div>

Basically just two DIVs which will hold content.

Book Review: MooTools 1.2 Beginner’s Guide

Published by David Walsh on Thursday, March 11, 20109 Comments
MooTools Book

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.

Unless you live under a rock or simply check my site for Christina Ricci pics every morning, you know I’m a bit of a MooTools fanboy. I spend hours every day writing MooTools tutorials, getting in touch with the MooTools community and development team members, and oh yeah…coding a bit too. When it was brought to my attention that Jacob Gube and Garrick Cheung had written a MooTools book for beginners, I was really excited to check it out. The following are my thoughts on their book.

Create Twitter-Style Dropdowns Using MooTools

Published by David Walsh on Thursday, March 11, 201015 Comments
Twitter Dropdown

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

Published by David Walsh on Wednesday, March 10, 20107 Comments

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.





© David Walsh 2007-2010. Contact David Walsh. Powered by the remarkable MooTools javascript framework.