CODEWITHSUNDEEP
javascriptcssgoogle-chromechromium
cmn
cmn

Reputation: 305

Force Chrome cursor update when mouse-idling vanilla javascript

I have a similar issue as related in this link :

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

When new div appears and when mouse does not move, cursor is not updated in Chrome 40. The Chrome issue list some workarounds, but I don't get them to work with my code. There are also some stackoverflow question listing this issue but they don't fix this particular case with vanilla javascript.

HTML :

<div id ="d">
    Hello
</div>

CSS :

div#d {
    width: 100px;
    height: 100px;
    background-color: red;
}

div.curs {
    cursor: pointer;
    height: 80px;
    background-color: grey;
}

JS :

setTimeout(function(){
    var div = document.getElementById('d');
    div.innerHTML = div.innerHTML + '<div class="curs">World</div>';    
}, 5000);

What is the easiest vanilla javascript workaround for this particular case?

Fiddle : http://jsfiddle.net/2zh90st6/

Upvotes: 4

Views: 4638

Answers (2)

Peleg
Peleg

Reputation: 1224

Hmm this is interesting. Either way, triggering a change in the body's cursor, seems to do the trick in Chrome v42:

setTimeout(function(){
    var div = document.getElementById('d');
    div.innerHTML = div.innerHTML + '<div class="curs">World</div>';    

    document.body.style.cursor = 'default';

}, 5000);

Upvotes: 2

Niel Thiart
Niel Thiart

Reputation: 638

On Google Chrome v42, you can schedule a cursor update by changing the cursor style of the element currently under the cursor, or any of this element's ancestors. Note that the cursor style has to change after the new element has been added to the DOM.

var container, overlay;

container = document.getElementById('container');

setTimeout(function() {
  overlay = document.createElement('div');
  overlay.id = 'overlay';
  container.appendChild(overlay);

  // Change container cursor from 'auto' to 'default',
  // to schedule cursor update while hovering overlay
  container.style.cursor = 'default';
}, 5000);
#container {
  position: relative;
  padding: 10px;
  cursor: auto;
  background: #7FDBFF;
  color: #001F3F;
  width: 100px;
  height: 100px;
}
#overlay {
  cursor: pointer;
  width: 100px;
  height: 100px;
  background: #001F3F;
  color: #7FDBFF;
  position: absolute;
  top: 10px;
  left: 10px;
}
<div id="container">
  Hover me and wait for a dark overlay.
</div>

The chromium issue you linked to, Issue 26723: Mouse cursor doesn't change when mouse-idling, seems quite active at the moment, so hopefully this kind of workaround won't be required for long.

Upvotes: 3

Related Questions