// Add 3 days to Today
Date.today().add(3).days();

// Is today Friday?
Date.today().is().friday();

// Number fun
(3).days().ago();

// 6 months from now
var n = 6;
n.months().fromNow();

It saves a lot of headaches

Let’s say we have the following PHP script:

if( !is_user_allowed() ) {
    header( 'Location: ' . PATH_TO_LOGIN_PAGE );
    die();
}

Pretty simple and self explanatory. If the user isn’t logged in, he gets sent to the login form. But what happens if the request is made via AJAX? A simple AJAX request made using the prototype.js library looks like this:

new Ajax.Request(
    'server_side.php',
    {
        onSuccess: function( t ) {
            $( 'container' ).update( t.responseText );
        }
    }
);

What happens if the user isn’t logged in? The browser makes two requests to the server, the second one to the page containing the login form.

And the whole login page gets loaded into a small container on current page, ruining the design and confusing the user.

Although I’ve encountered this problem on several occasions, I didn’t give it much thought. I’ve used that very popular design pattern “I know it’s lame, but hey, it works…moving on”. The implementation on case was like this: add a token to the login page’s markup, something like and check to see if this string is in the response text. Like this:

new Ajax.Request(
    'server_side.php',
    {
        onSuccess: function( t ) {
            if( t.responseText.indexOf( '<!--login-->') != -1 ) {
                document.location = 'login.php';
            }
            else {
                $( 'container' ).update( t.responseText );
            }
        }
    }
);

Plain and simple. And lame. I admit it. But hey! It works Still, I’ve found a better way of doing things, that relies on HTTP headers. First of all, in the login page, instead of a lame string message, I’ve added some custom headers to the response.

header( 'HTTP/1.0 401 Authorization Required' );
header( 'Login-path: ' . PATH_TO_LOGIN_PAGE );

And then, I’ve altered the the javascript a little. Since a response served with a 401 header won’t trigger the onSuccess callback function, this script uses onComplete.

new Ajax.Request(
    'server_side.php',
    {
        onComplete: function( t ) {
            switch( t.status ) {
                case 200:
                    $( 'container' ).update( t.responseText );
                    break;
                case 401:
                    document.location = t.getHeader( 'Login-path' );
                    break;
            }
        }
    }
)

It works. And it’s not so lame. Mission accomplished…

I’ve wrote a small script that computes the maximum height between several divs, and forces this height on the shorter divs. You can also add a listener to monitor if one of the divs changes height and if that happens, the script will act accordingly, making all the divs equal again.

It’s quite simple to use, just insert this script anywhere on your page:

Event.observe(
	window,
	'load',
	function() {
		var e = new Equalizer( 'div1', 'div2', 'div3');
	},
	true
);

Where div1, div2 and div3 are the ids of the divs representing the columns. If you need to add some extra content in one of those divs, just start a PeriodicalExecuter to check if one of the divs changed size.

Event.observe(
	window,
	'load',
	function() {
		var e = new Equalizer( 'div1', 'div2', 'div3');
		var pe = new PeriodicalExecuter(
			function() {
				Equalizer.keep( e );
			},
			1 // repeat each second
		);
	},
	true
);

Enough said, here is a working demo. You can get just the js file from here, note that the prototype library is required in order for the script to work.

This script was tested in many browsers, such as IE6 & 7, Firefox, Opera, Safari (Windows version) and Flock and it worked, but experience taught me to always expect the unexpected, so things might go wrong at any time. When this happens, don’t panic, just a post a short message below, describing your error.

Bugs I already know about

Yes! I know that there are some problems with this script and I’m going to fix them. Or at least try to do so.

The first problem is that when additional content is added to a div, the rest of them stretch to the new height. But when the extra content is hidden, all the divs keep the new height. That’s because the minHeight attribute still holds the larger value that was set when the hidden content became visible. The approach I’ve tried so far was to compute the height of a div as the sum of all its visible children’s heights, rather then to use the div’s CSS defined height as it’s returned by the Element.getHeight() method.

/**
 * computes the height of a div as the sum
 * of its visible childrens' heights
 *
 * @param DOMObject div
 */
getComputedHeight = function( div ) {
	if ( div.hasChildNodes() ) {
		var height = 0;
		var child = null;
		div.childNodes.each(
			function( item ) {
				item = $( item );
				if( item.nodeName != '#text' && item.visible() ) {
					height += item.getHeight();
				}
			}
		);
		return height;
	}
	return div.getHeight();
}

For some unknown reason, this doesn’t quite work as I expected But I’m working on it!

The other problem I came across and I was unable to fix so far is the fact that the divs change height when the user changes the font size (CTRL+/CTRL-). Quite normal behaviour, but annoying in this case.

If you have any idea in how to solve these problems, please post a comment bellow or contact me. Credits will be given.