CodeProject: Hourglass cursor for Web/ASP.NET pages. Free source code and programming help

Report Article

Discuss

Send to a friend

34 votes for this Article.

Popularity: 6.40 Rating: 4.18 out of 5

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

About the Author

raouls

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

Occupation:	Web Developer
Location:	South Africa

Other popular Client side scripting articles:

Handy XP Style Menu
This is a pretty menu in XP style. Easy to setup, highly customizable.
JavaScript For Beginners
A very easy tutorial for JavaScript beginners
JavaScript Virtual Keyboard
This article presents a Virtual Keyboard - an important addendum to the library of usability tools.
Auto-complete Control
Auto-complete control.
Observer Design Pattern Using JavaScript
Ensuring a crisp boundary exists between objects, enabling greater reuse and system maintainability.

Article Top

You must Sign In to use this message board.

Msgs 1 to 11 of 11 (Total in Forum: 11) (Refresh)

FirstPrevNext

I recommend adding onfocus event to body tag

Sthrudel

3:46 6 Dec '06

The cursor didn't change back to default when I clicked on a link which opened browser's open/save file dialog and then clicked Cancel button. I added this: `function ChangeCursorToDefault() { document.body.style.cursor = 'default'; } <body ="ChangeCursorToDefault();" ...>` and it works fine.
Sign In·View Thread·PermaLink	2.00/5 (1 vote)

What if hourglass cursor is over link?

Mircea Grelus

2:05 21 Feb '06

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.
Sign In·View Thread·PermaLink

Use for button click event

Anonymous

22:21 3 Jul '05

What I have to do when I want to use Hourglass cursor for button click event?
Sign In·View Thread·PermaLink	1.75/5 (4 votes)

Not a W3C DOM Standard DFU₂₃ 8:20 22 Sep '04

The OnBeforeUnload event is an IE specific event so this will potentially not work in any other browser. However, as a workaround I think you could attach an OnClick attribute to a main submit button for a page to call the JavaScript function and keep the same functionality ... Wally Atkins Newport News, VA, USA http://wallyatkins.com
Sign In·View Thread·PermaLink

Re: Not a W3C DOM Standard

raouls

4:11 28 Sep '04

I know about the OnBeforeUnload event. I use Firefox exclusively as my browser, and so I initially only used the OnUnload event. However, my colleague was complaining that the hourglass didn't work on her machine. I saw that the reason was that IE fired the event only once the new page started loading, not when the command was given to navigate elsewhere (as is the case with Firefox). That's why I included both the OnBeforeUnload and OnUnload events. I did explain this in my article, though perhaps not clearly enough.

--
Raoul Snyman
Saturn Laboratories
e-mail: raoul.snyman@saturnlaboratories.co.za
web: http://www.saturnlaboratories.co.za/
linux user: #333298

SmartNav problem

StephenMSmith

1:01 17 Sep '04

This is odd. IE blows up on me after implementing this tip, but only when SmartNavigation is enabled? WinXP SP2.
Sign In·View Thread·PermaLink

Re: SmartNav problem

Anonymous

7:31 17 Sep '04

I'm about to implement this solution and already use SmartNavigation. Can you tell me what you mean by "blows up?" I don't want to rewrite my app if this won't work. I would rather keep SmartNav.
Sign In·View Thread·PermaLink

Re: SmartNav problem

StephenMSmith

15:12 17 Sep '04

Whoops, I apologize about this. I have since rebooted all boxes and the problem does not occur at all. My mistake. Also, I wasn't very clear at all regarding the problem that was occuring which was GPF in mshtml.dll upon closing the browser. Sorry about that. This is a great tip and it does work too. Steve
Sign In·View Thread·PermaLink

Simple solution

WoutL

14:41 11 Sep '04

A solution as simple as this one deserves a 5. *Wout Louwers*
Sign In·View Thread·PermaLink	5.00/5 (1 vote)

Re: Simple solution

Anonymous

1:33 16 Sep '04

don't forget though that if you use this approach should you open another window with something like

function SelectBookedDate(guid) 
{
winHandle = window.open('Calendar/SelectDate.aspx, 'SelectDate', 'left=200, top=200, width=220, height=190);
if (!winHandle.opener)
     winHandle.opener = self;
winHandle.focus();
}

then after the winHandle.focus() add this line:
self.document.body.style.cursor='default';

otherwise the cursor on the "main page" will turn to a hourglass

Re: Simple solution

raouls

9:24 17 Sep '04

what you can also do is to add the following to your `body` tag: <body style="cursor:default;" ... > with this, the cursor is set to default when that particular page opens. -- Raoul Snyman Saturn Laboratories e-mail: raoul.snyman@saturnlaboratories.co.za web: http://www.saturnlaboratories.co.za/
Sign In·View Thread·PermaLink	2.00/5 (2 votes)

Last Visit: Tuesday, December 2, 2008 3:54 PM Last Update:Tuesday, December 2, 2008 3:54 PM

General News Question Answer Joke Rant Admin