MooTools IdleTimer

December 14th, 2009

Have you ever wanted to log a user out of your site if he is inactive for a given amount of time?
Create a better user experience by dimming or hiding page elements while the user is watching a video?

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.

ØnskerSeg.no is now live

December 8th, 2009

My new project, ØnskerSeg.no is now live.

“Ønsker Seg” is a service that lets you create and share wishlists with people you know. Each user gets a simple and easy to remember URL, x.onskerseg.no. For now, the service is only available in Norwegian, but if I have enough time it would be fun to make it “international”.

It’s not often I have the time or dedication to finish a project like this, so I’m very happy to see it online and I’m going to keep adding features to it. So if you’re Norwegian and you’re looking for a simple way to create and share wishlists, take a look!

My latest project, ØnskerSeg.no

My latest project, ØnskerSeg.no

Selecting all checkboxes in a group with Mootools, one-liner

August 23rd, 2009
Fairly common..?

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:

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