Click here to Skip to main content
Click here to Skip to main content

Hourglass cursor for Web/ASP.NET pages

, 10 Sep 2004
Rate this:
Please Sign up or sign in to vote.
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:

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.

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

Share

About the Author

raouls
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

 
GeneralMy vote of 1 PinmemberFrancesco ahdgjahg24-Sep-13 23:39 
GeneralI recommend adding onfocus event to body tag PinmemberSthrudel6-Dec-06 3:46 
QuestionWhat if hourglass cursor is over link? PinmemberMircea Grelus21-Feb-06 2:05 
Do you know if it is possible to keep the cursor hourglass (while the page is loading) even if you move your cursor over a link or a button (when the cursor changes to "hand"). Or is that something controlled by the browser and you have no power over it?
 
regards,
Mircea
Many people spend their life going to sleep when they’re not sleepy and waking up while they still are.
GeneralUse for button click event PinsussAnonymous3-Jul-05 22:21 
GeneralNot a W3C DOM Standard PinmemberDFU2322-Sep-04 8:20 
GeneralRe: Not a W3C DOM Standard Pinmemberraouls28-Sep-04 4:11 
GeneralSmartNav problem PinmemberStephenMSmith17-Sep-04 1:01 
GeneralRe: SmartNav problem PinsussAnonymous17-Sep-04 7:31 
GeneralRe: SmartNav problem PinmemberStephenMSmith17-Sep-04 15:12 
GeneralSimple solution PinmemberWoutL11-Sep-04 14:41 
GeneralRe: Simple solution PinsussAnonymous16-Sep-04 1:33 
GeneralRe: Simple solution Pinmemberraouls17-Sep-04 9:24 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 10 Sep 2004
Article Copyright 2004 by raouls
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid