A couple of months ago I came across Nick Zakas’ YUI approach to this problem, and recently I found Paul Irish’s jQuery plugin which was based on Nick’s work.

This is my attempt at creating a Mootools class that uses the same approach. Quite simply, it fires a timer that activates a callback after a given amount of time. The timer is reset if the user moves the mouse, presses a key, scrolls using the scroll wheel or clicks any mouse button. This has to be done over the active document, obviously.

Key features:

• Can be attached to a single element on the page or the entire document/window.
• Lets you set up multiple instances with different timeouts and events.
• Easily retrieve the idle status from the instance using the isIdle property.
• Find the number of milliseconds since the user was last active.
• Allows you to call the active() method to manually reset the idle state – useful for Flash and other overlays that lets you communicate with Javascript.
• Easily retrieve an IdleTimer instance using element.get(‘idle’, { options });
• Free and open source. MIT-licensed.

Check out the demo page for more details. The source is available on Github as well as in the recently opened MooTools Forge.

Fairly common..?

How many times have you had to do one of these things? A group of items, each with a checkbox. You want a button/checkbox to select all the checkboxes within that group.

I ran across this again today, and making the javascript to do the work I was once again reminded why I love Mootools so much:

With just three lines of code (1 line to do the actual checking/unchecking), I had this up and running. It couldn’t have taken longer than 30 seconds to write. I love quick snippets

Obviously, this wouldn’t be hard to do in jQuery or any other JS framework, but I love how elegant and intuitive Mootools does it. I shudder when I think of how many times I’ve done things similar to this in plain old Javascript.

Anyway, there’s a demo page available, and here’s the code I ended up with, for anyone interested:

1
2
3

$$('li.head input[type=checkbox]').addEvent('click', function() {
	this.getParent('ul').getElements('input[type=checkbox]').setProperty('checked', this.checked);
});