AJAX-ify your site in 5 minutes

I’m discovering the wonders of AJAX. Its an awesome means of making smooth transitions on your website. When pages flicker and jump too quickly to the next link, users can be left unaware that anythings actually happened. With a nice (and easy to do) transition, your page can slide down when loaded and slide up when you’re done.

I’m unfortunately not skilled enough to write my own AJAX functions, but thanks to the likes of Scriptaculous and Prototype, and guru’s like Michael Heilemann, I don’t need to be. :)

I recently combined some techniques on 24 Ways to make some nice transitions on a site I’m working on. Heres how it all works…

The code

You’ll need this bit of code saved as combo.js

Effect.OpenUp = function(element) {
element = $(element);
new Effect.BlindDown(element, arguments[1] || {});
}Effect.CloseDown = function(element) {
element = $(element);
new Effect.BlindUp(element, arguments[1] || {});
}

Effect.Combo = function(element) {
element = $(element);
if(element.style.display == 'none') {
new Effect.OpenUp(element, arguments[1] || {});
}else {
new Effect.CloseDown(element, arguments[1] || {});
} }

Then you can download prototype.js and effects.js which you’ll find in the Scriptaculous Library

Link to all 3 of these documents in the head of your site.

Sorted. Thats the hard part.

The div

Your site should have a wrapping div… a container around all your code. If not, add one and set it to display:none; like this:

div id="wrap" style="display: none"

Note: The div needs to have an id, not a class.

The trigger

javascript:Effect.Combo('wrap');

Now under normal circumstances, your trigger would be a link somewhere that would slide open/close your hidden div, but in this case, we’re applying the effect to the entire site. So we’re going to use the onload trigger on the body like so:

body onload="javascript:Effect.Combo('wrap');"