Posts Tagged ‘Mootools’

MooTools IdleTimer

Monday, 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.

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

Sunday, 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);
});

New blog finally up!

Sunday, June 7th, 2009

Well, I finally got off my ass and designed a new layout for my blog. I started with an existing WordPress template, but in the end I just made it from scratch. It should validate as XHTML 1.0 Strict, which I’m always happy to see :-)

I wanted to do some simple MooTools stuff for the site, since that is a passion of mine, ended up with:

  • A simple “Fluid layout”/”Fixed width” toggler (top right <> button).
  • A simple text size toggler (top right Aa button).
  • A very simple onload animation for the dot in the logo.

The first two were inspired by the “Fusion” wordpress theme, which I thought was a nice touch. Mine are not animated, cause I couldn’t be bothered. They do work though, and even saves the state in a cookie (should you return to my humble blog at a later time). The little animation thing was just something I did while I was bored.

I decided to say “to heck with IE6″ for this site. It’s ment for developers anyway, and any self-respecting developer would not use IE6. Might put up a “Oh my god, you’re using IE6″ thing at some point, but for now I’ll just let them think the site is ugly ;-)

There is no content here yet, but I hope to actually put up something once in a while now, as opposed to my previous blogging attempts.

Thanks for reading!
- Rexxars