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. |
|
|
 |
|
|
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 >onfocus="ChangeCursorToDefault();" ...>
and it works fine.
|
| Sign In·View Thread·PermaLink | 2.00/5 |
|
|
|
|
|
|
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 | |
|
|
|
|
|
|
|
|
|
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 ...
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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 | |
|
|
|
|
|
|
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 | |
|
|
|
|
|
|
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 | |
|
|
|
|
|
|
|
|
|
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
|
| Sign In·View Thread·PermaLink | 2.00/5 |
|
|
|
|
|
|
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 |
|
|
|
|
|
|
