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.
