Simplest Way to Set Cursor to Wait, Then Have All Elements Revert Back

Simplest way to set cursor to wait, then have all elements revert back

You can use a combination of toggling a class on the body and !important.

http://jsfiddle.net/UGwmv/2/

$("button").click(function(){
   $("body").toggleClass("wait");
   return false; 
});

body.wait, body.wait *{
    cursor: wait !important;   
}

When body has the wait class, everything will show the wait cursor.

JavaScript Cursor Change (and change back again)

For your first problem, try using cursor: wait !important;.

For your second problem, the default cursor for elements is cursor: auto;, not cursor: default; or cursor: inherit;.

Pointer cursor overrides wait cursor even with !important

try this

   $(document).ajaxStart(function(){
    $('.pointer').addClass("wait");
}).ajaxComplete(function(){
    $('.pointer').removeClass("wait");
});

Wait cursor over entire html page

I understand you may not have control over this, but you might instead go for a "masking" div that covers the entire body with a z-index higher than 1. The center part of the div could contain a loading message if you like.

Then, you can set the cursor to wait on the div and don't have to worry about links as they are "under" your masking div. Here's some example CSS for the "masking div":

body { height: 100%; }
div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }

Changing cursor to waiting in javascript/jquery

In your jQuery use:

$("body").css("cursor", "progress");

and then back to normal again

$("body").css("cursor", "default");

Change cursor to wait when running a lengthy JQuery operation

This seems good but the problem is that your browser "freezes" when starting to run foo and unfreezes at the end so you can't notice the cursor change...

Try something similar to what you have but using a timeout...

function foo(){
   jQuery('body').css('cursor', 'wait');
   window.setTimeout(someLengthy,1);
}

function someLength(){
   //lengthy jQuery sort/DOM manipulation
   jQuery('body').css('cursor', 'default');
}

How can I make the cursor turn to the wait cursor?

You can use Cursor.Current.

// Set cursor as hourglass
Cursor.Current = Cursors.WaitCursor;

// Execute your time-intensive hashing code here...

// Set cursor as default arrow
Cursor.Current = Cursors.Default;

However, if the hashing operation is really lengthy (MSDN defines this as more than 2-7 seconds), you should probably use a visual feedback indicator other than the cursor to notify the user of the progress. For a more in-depth set of guidelines, see this article.

Edit:
As @Am pointed out, you may need to call Application.DoEvents(); after Cursor.Current = Cursors.WaitCursor; to ensure that the hourglass is actually displayed.

Changing the mouse icon to 'waiting' no matter where it is

You could use !important to override the css set on buttons, links, input and body.

$("body,a,button,input").css("cssText", "cursor:wait !important;");

Note the usage of cssText above.

You could also specify * as your selector, but that would be pretty reckless.

---

Related Topics