Change Mouse Cursor for whole page?

Question

I have a drag UI program, where the mouse cursor on the draggable element changes to a grabbing hand on click.

The problem is, I allow the drag to happen anywhere on screen, and the cursor changes over anchor tags, etc...

I've tried $('*').addClass('grabbing'), but it's REALLY expensive.

Is there a simple easy code efficient way to handle this?

Solution 1

Do it at the CSS level:

* {
   cursor: pointer;
}

doing it in jquery forces it to iterate every single node in the dom and rewrite its css classes. On a long document, that's a huge waste of time.

Solution 2

try this

$('body').addClass('grabbing');

OR

$(document).addClass('grabbing');

//EDITED ANSWER

$('body').mousedown(function(e){
    $(this).css({'cursor':'pointer'});
}).mouseup(function(e){
    $(this).css({'cursor':'auto'});
});

If you firebug is on, you can see the changes in body style tag. But some how it's not working. You can take it as a reference and try similar approach the get solution.

Solution 3

Though this is not a direct answer to this question but I want to draw attentions to that we can solve the problem differently.

By putting an empty fullscreen div on top of everything except drop zones, activate it after mousedown event. So we can simply change cursor for entire screen through :hover class of that div .

Comments

[Mike Christensen]

Won't hire zindex elements override that?

[Wesley]

@MikeChristensen Correct. This won't quite do it.

[Wesley]

But this will always be active. The cursor needs to change only while the mouse is down. It needs to happen in Javascript somehow.

[Marc B]

You can dynamically add/remove css rules via javascript. Just do it from within the onmousedown/onmouseup and it should be quicker than adding/removing classes from every dom node on the page.

[Wesley]

@Mark B Cool. Can you provide a new answer with an example? I'll give it a shot and if it works right I'll mark it.

[Mike Christensen]

Same problem as the other answer - Other CSS elements and classes will override this if they specify a cursor.

[Marc B]

@mike: there's always !important.

[Wesley]

@MarcB It seems I can add but not remove with this. If you figure out the code and post it as an answer I'll mark it. There is a JQuery Rule plugin that might work.

[Marc B]

@Wesley: .cssRules and .rules are just arrays. you can use regular array operations to remove a particular rule by deleting its corresponding array element.

[Alistair R]

Can add as a subclass with !important to preserve without dynamically adding rules. body.loading-cursor *{ cursor: wait !important; }

[Charon ME]

still doesn't set the cursor for the whole page when BODY is shorter than 100%