Getting the browser cursor from "wait" to "auto" without the user moving the mouse

Question

I use this jQuery code to set the mouse pointer to its busy state (hourglass) during an Ajax call...

$('body').css('cursor', 'wait');

and this corresponding code to set it back to normal...

$('body').css('cursor', 'auto');

This works fine... on some browsers.

On Firefox and IE, as soon as I execute the command, the mouse cursor changes. This is the behavior I want.

On Chrome and Safari, the mouse cursor does not visibly change from "busy" to "auto" until the user moves the pointer.

What is the best way to get the reluctant browsers to switch the mouse pointer?

Answer 1

I don't think you'll be able to do it.

However, try changing the scroll position; it might help.

Answer 2

Try using the correct css value for the cursor property:

$('body').css('cursor','wait');

http://www.w3schools.com/CSS/pr_class_cursor.asp

Answer 3

It's probably a bug in WebKit; you should report it.

Answer 4

It is a bug in both browsers at the moment. More details at both links (in comments as well):

http://code.google.com/p/chromium/issues/detail?id=26723

and

id=20717

Answer 5

I haven't tried this, but what about if you create a transparent div that is absolutely positioned and fills the viewport just before changing the CSS. Then, when the css is changed on the body, remove the div. This might trigger a mouseover event on the body, which might cause the cursor to update to the latest CSS value.

Again, I haven't tested this, but it's worth a shot.