Richard Parnaby-King

Web Developer – PHP, Zend Framework and Actionscript 3

Posted on | | No Comments

On any website that does any form of background operation that prevents the user from progressing immediately (for example an ajax operation that updates search filters based on the currently selected option) then the user needs to be informed.

The simplest method for implementing this is to change the users’ mouse cursor. This can be implemented by adding a class to the body that changes the users cursor when you start the background operation, and remove the class when the background operation completes.

Demo

In the example of an ajax operation using jQuery:
[javascript]
$.ready(function(){
//when user changes the drop-down option…
$(‘form select’).change(function(){

//… and add the ajax class to the body …
$(‘body’).addClass(‘ajax’);

//… do an ajax call to get the next lot of drop-down filters.
var value = $(this).parent().serialize();
$.ajax({
type: “POST”,
url: “/ajax-search”,
data: value,

//when the ajax function returns…
success:function(data) {
//…do something with the search form
//…

//… and remove the ajax class last.
$(‘body’).removeClass(‘ajax’);
}
});
});
});
[/javascript]

So that adds the class to our website, this is the little bit of css you need to change the users’ cursor:
[css]
body.ajax, body.ajax * {
cursor:progress;
}
[/css]

And that is it! See it in action

Conclusion

By adding a little bit of feedback to the user you reduce the frustration experienced when the website “stops” for a bit.

Category: CSS, HTML, JavaScript, jQuery

Posted By:

Comments

  • ABOUT

    Having fifteen years of programming experience in PHP, Zend Framework and ActionScript3, I have a very strong working knowledge of object orientated programming.

    I am a PC Gamer! Playing FPS, RTS, RPG and the occasional MMO since 1996 I have a huge number of a variety of fast-paced games.

  • Recent Posts

  • Categories

  • SUBSCRIBE TO OUR FEED