CODEWITHSUNDEEP
javascriptjquerycssmouse
Anton
Anton

Reputation: 4018

Mouse cursor set using jQuery/CSS not changing until mouse moved

In my code I use the jQuery/CSS to set and unset the 'wait' mouse cursor with the following code:

  function setWaitCursor() {
    $('body').css('cursor', 'wait');
  }

  function setDefaultCursor() {
    $('body').css('cursor', '');
  }

I use this code to change the mouse cursor for a long operation:

setWaitCursor();

... do stuff that takes a few seconds ...

setDefaultCursor();

This code doesn't seem to work unless you move the mouse, however (at least for Chrome on Win 10). If the mouse is not moved after setDefaultCursor is called, the cursor displays the 'wait' cursor until the mouse is moved (or vice versa).

Example: https://jsfiddle.net/antonyakushin/0jv6rqkf/

In this fiddle, the cursor changes for 2 seconds after the link is clicked. If you don't move the mouse when you click the link, the cursor does not change.

What is the best way to resolve this issue, so that even if the mouse is not moved the cursor is changed?

Upvotes: 23

Views: 8130

Answers (5)

alehro
alehro

Reputation: 2208

I think I solved it! Just call setTimeout() after you change the cursor. For example

$('body').addClass('in-progress-cursor');
setTimeout(null, 0); //in typescript we need to provide arguments

This is well-known trick (Why is setTimeout(fn, 0) sometimes useful?) but I didn't expect this would work in this case.

This is my favorite method of telling user unobtrusively that there is something going on. For example I use it to indicate that http requests are in progress. It is such a relief that the solution is found. Why I feel stupid again... Actually I see the timeout in John R's answer now. But it is not evident enough.

Upvotes: 2

Jeff R.
Jeff R.

Reputation: 188

I had the same problem and I noticed on another post cursor won't change until mouse moves that they had suggested doing a blur and focus to fix this. It worked for me. So, your setWaitCursor() should look something like this. That should force it to change without the mouse move. It worked for me in Chrome, but haven't tried other browsers.

  function setWaitCursor(elem) {
    elem.css('cursor', 'wait');
    $('body').css('cursor', 'wait');
    window.blur();
    window.focus();
  }

Upvotes: 1

philippe_b
philippe_b

Reputation: 41308

Although this is not the answer to this specific problem, this behavior can happen:

  • On Chrome
  • With DevTools open (which is very likely, in order to debug this issue)

The solution is simply to close the Chrome DevTools.

Upvotes: 42

John R
John R

Reputation: 2801

Just change the body to *. It will be applicable to all the elements.

Fiidle Demo

Code snippets:

$(document).ready(function() {

  function setWaitCursor() {
    $('*').css('cursor', 'wait');
  }

  function setDefaultCursor() {
    $('*').css('cursor', '');
  }

  $('#testLink').on('click', function() {
    setWaitCursor();
    setTimeout(function() {
      setDefaultCursor();
    }, 2000);
    return false;
  });

});
body {
  min-width: 500px;
  min-height: 500px;
  background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="mouseContainer">
  <a href="#" id="testLink">Test Link</a>
</div>

Upvotes: 2

Rino Raj
Rino Raj

Reputation: 6264

Some elements have default cursor styles. So wile changing the cursor style we need to change that too.

$(document).ready(function() {
  function setWaitCursor(elem) {
    elem.css('cursor', 'wait');
    $('body').css('cursor', 'wait');
  }
  function setDefaultCursor(elem) {
    elem.css('cursor', '');
    $('body').css('cursor', '');
  }
  $('#testLink').on('click', function() {
    var x = $(this)
    setWaitCursor(x);
    setTimeout(function() {
      setDefaultCursor(x);
    }, 5000);
    return false;
  });
});

Demo fiddle

Upvotes: 3

Related Questions