Skip to main content
Email Password   helpLost your password?

Introduction

In one of our ASP.NET projects at work, some of the controls caused a post back, but didn't actually change the page visibly. So, we wanted to show an hourglass cursor, like a normal Windows app does when it's busy, to show that the ASP app was actually doing some work, and that the user should wait till it was finished.

JavaScript to the rescue!

Now, I'm a big fan of XHTML and CSS, so my first thought was to CSS... but to implement that dynamically was looking quite hectic... then I thought a bit... "But wait! What about JavaScript?"

JavaScript can be used to do some nifty client-side things, like changing the cursor. In fact, the solution is so simple, it's only about two lines of code.

All you need to do is to write a function like this:

function doHourglass()
{
  document.body.style.cursor = 'wait';
}

Quite simple, huh?

The next step is to get the web form to call that function when a post back occurs. Well, that is another very simple addition. This time, just add an event handler to your body tag in your page.

<body onbeforeunload="doHourglass();" onunload="doHourglass();">

Points of Interest

The first question you're probably asking is, "Why is there both an onbeforeunload and an onunload event handler?" The reason for that is that if your app is being viewed in IE, it seems to prefer the onbeforeunload, whereas other browsers seem to prefer the onunload.

You might also be asking why there is no code to set the cursor back. Well, mainly because there is no need for it. As far as the browser is concerned, this is a new page, so it sets the mouse cursor back to the default pointer.

Further Afield

What we did, so that we don't need to rewrite that JavaScript function in every single page, was to add it to a script file (like "script.js") and then just reference the file in every page. That way, we can also change the operation of the function easily, as it is only changed in one place. And a further advantage is that if we need to add more JavaScript functions, they can be added to our script file, and used on the appropriate page.

History

10 September 2004 - First posting.

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralI recommend adding onfocus event to body tag Pin
Sthrudel
3:46 6 Dec '06  
GeneralWhat if hourglass cursor is over link? Pin
Mircea Grelus
2:05 21 Feb '06  
GeneralUse for button click event Pin
Anonymous
22:21 3 Jul '05  
GeneralNot a W3C DOM Standard Pin
DFU23
8:20 22 Sep '04  
GeneralRe: Not a W3C DOM Standard Pin
raouls
4:11 28 Sep '04  
GeneralSmartNav problem Pin
StephenMSmith
1:01 17 Sep '04  
GeneralRe: SmartNav problem Pin
Anonymous
7:31 17 Sep '04  
GeneralRe: SmartNav problem Pin
StephenMSmith
15:12 17 Sep '04  
GeneralSimple solution Pin
WoutL
14:41 11 Sep '04  
GeneralRe: Simple solution Pin
Anonymous
1:33 16 Sep '04  
GeneralRe: Simple solution Pin
raouls
9:24 17 Sep '04  


Last Updated 10 Sep 2004 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009