check out my new blog at gmarik.info/blog

Thursday, December 20, 2007

Pragmatic ajax activity indicator with prototype and css

Step1

Put this javascript snipped somewhere into your html or as javascript inclusion:

Ajax.Responders.register({
onCreate: function() {
if($$('body').first() && Ajax.activeRequestCount > 0)
$$('body').first().addClassName('busy')
},
onComplete: function() {
if($$('body.busy') && Ajax.activeRequestCount == 0)
$$('body.busy').first().removeClassName('busy')
}
});

Previous chunk adds a body css class name to the html's body element everytime the Ajax.Request is made to the server. Pretty simple, eh?

Step 2

Define such css styles somewhere:

body.busy * {
cursor: progress !important;
}


This css rule says to change mouse cursor to convey us to wait a bit...

Step 3

Enjoy!

Labels: , , , ,

0 Comments:

Post a Comment

<< Home