Click here to Skip to main content
15,884,298 members
Articles / Web Development / HTML
Article

Hourglass cursor for Web/ASP.NET pages

Rate me:
Please Sign up or sign in to vote.
4.43/5 (40 votes)
9 Sep 20042 min read 199.1K   30   13
Show your users that something *is* actually happening when you do a postback on a web form.

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:

JavaScript
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.

HTML
<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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
South Africa South Africa
just another of these programming types... knows a little bit about c, c++, java, vc++ and c#... knows a little bit more about delphi... knows a little bit less about natural, cobol and basic... does the web thing from time to time and is heavily into standards compliance... prefers linux to windows too...

Comments and Discussions

 
QuestionDidn't Work For Me Pin
Joe Sweeney1-May-16 12:16
Joe Sweeney1-May-16 12:16 
GeneralMy vote of 1 Pin
Francesco ahdgjahg24-Sep-13 22:39
Francesco ahdgjahg24-Sep-13 22:39 
GeneralI recommend adding onfocus event to body tag Pin
Sthrudel6-Dec-06 2:46
Sthrudel6-Dec-06 2:46 
QuestionWhat if hourglass cursor is over link? Pin
Mircea Grelus21-Feb-06 1:05
Mircea Grelus21-Feb-06 1:05 
GeneralUse for button click event Pin
Anonymous3-Jul-05 21:21
Anonymous3-Jul-05 21:21 
GeneralNot a W3C DOM Standard Pin
DFU2322-Sep-04 7:20
DFU2322-Sep-04 7:20 
GeneralRe: Not a W3C DOM Standard Pin
raouls28-Sep-04 3:11
raouls28-Sep-04 3:11 
GeneralSmartNav problem Pin
StephenMSmith17-Sep-04 0:01
StephenMSmith17-Sep-04 0:01 
GeneralRe: SmartNav problem Pin
Anonymous17-Sep-04 6:31
Anonymous17-Sep-04 6:31 
GeneralRe: SmartNav problem Pin
StephenMSmith17-Sep-04 14:12
StephenMSmith17-Sep-04 14:12 
GeneralSimple solution Pin
WoutL11-Sep-04 13:41
WoutL11-Sep-04 13:41 
GeneralRe: Simple solution Pin
Anonymous16-Sep-04 0:33
Anonymous16-Sep-04 0:33 
GeneralRe: Simple solution Pin
raouls17-Sep-04 8:24
raouls17-Sep-04 8:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.