JQuery hide mouse if it's not moving

Question

I'm trying to hide the mouse if it hasn't moved for a period of time.

This is the code I'm using:

$(document).ready(function() {
    var j;
    $(document).mousemove(function() {
        clearTimeout(j);
        $('html').css({cursor: 'default'});
        j = setTimeout('hide();', 1000);
    });
});

function hide() {
    $('html').css({cursor: 'none'});
}

When the hide() function is called the cursor is hidden, but unhides a split second later. Any help is appreciated.

@zerkms I would disagree. Jquery can be used to create fullScreen games too, in that case I don't need the mouse if I read that I can use the keyboard. And if the mouse appears if I move it... I will get the point in a nano-second. — Roko C. Buljan, May 12 '12 at 14:47
This has been asked before: http://stackoverflow.com/search?q=jquery+hide+cursor. In which browser are you testing? I remember vaguely that there might be a bug in Chrome regarding this. — Felix Kling, May 12 '12 at 14:54
@Felix Kling I can hide the cursor, I was wondering why it unhides almost instantly when it's put inside a mousemove event. I just tested it in FireFox and what I'm doing actually works, so you are right, it is a bug with Chrome :( Thanks for the help. — Clinton Jooooones, May 12 '12 at 15:00
I think @mVChr found the bug I was talking about. I remember now that hiding the cursor somehow triggered `mousemove` in Chrome. That's the bug report: http://code.google.com/p/chromium/issues/detail?id=103041 — Felix Kling, May 12 '12 at 15:04
You might be able to use a custom cursor loaded from a URI that is simply transparent. http://stackoverflow.com/a/3354258/880434 — Chamika Sandamal, May 12 '12 at 15:38

score 5 · Answer 1 · answered May 12 '12 at 15:02

5

Your initial problem is that the hiding of the mouse triggers mousemove and thus immediately resets it back to default. So you could solve that like this...

var justHidden = false;

$(document).ready(function() {
    var j;
    $(document).mousemove(function() {
        if (!justHidden) {
            justHidden = false;
            console.log('move');
            clearTimeout(j);
            $('html').css({cursor: 'default'});
            j = setTimeout('hide();', 1000);
        }
    });
});

function hide() {
    $('html').css({cursor: 'none'});
    justHidden = true;
}

...BUUUUUT...

You face a problem here which at the moment seems unsolvable to me. That is, a hidden mouse does not trigger mousemove ever, so once it's hidden you will not be able to unhide it as far as I can tell.

I'll keep investigating to see if there's a solution I'm missing.

answered May 12 '12 at 15:02

mVChr

49,587
11
107
104

In Chrome it still just hides and unhides instantly :( – Clinton Jooooones May 12 '12 at 15:09
Nevermind, it does hide but doesn't show up again like you had said. – Clinton Jooooones May 12 '12 at 15:16
5

@user802519: mVChr has been close (+1 for that). You just have to reset `justHidden` after a while. See this example: http://jsfiddle.net/NmKNC/. It seems a timeout of 100ms is not enough, 500 works fine for me though. – Felix Kling May 12 '12 at 15:25
1

You perhaps also just could change the cursor to a custom one, where the custom cursor is just an transparent PNG – TheYaXxE Mar 29 '14 at 19:20

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

I found this thread when I was looking for solution for this challenge in 2019. Based on answer here and in 'Hiding the mouse cursor when idle using JavaScript' I made a slightly different solution:

var DEMO = {
  INI: {
    MOUSE_IDLE: 3000
  },
  hideMouse: function() {
    $("#game").css('cursor', 'none');
    $("#game").on("mousemove", DEMO.waitThenHideMouse);
  },
  waitThenHideMouse: function() {
    $("#game").css('cursor', 'default');
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    setTimeout(DEMO.hideMouse, DEMO.INI.MOUSE_IDLE);
  },
  showMouse: function() {
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    $("#game").css('cursor', 'default');
  },
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This simple and clear example gives you the option to start hiding mouse (DEMO.hideMouse()) and also to turn this off (DEMO.showMouse()). It does not create multiple events on same element. This example shows hiding mouse pointer over #game div element. Just change this to the div of your choice or body.

As of fully updated Chrome and FF in October 2019: it works on both.

Lorenzo Cerato · Answer 3 · 2020-09-11T19:53:18.903

I'm 8 years late but I have a solution:

• First of all download an image of a cursor from the internet or copy my svg code:

<svg id="cursor" width="20" height="20" viewBox="0 0 95 92" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M84.6925 46.0105L40.25 20.3516C35.25 17.4648 29 21.0733 29 26.8468L29 78.1645C29 84.9879 37.3721 88.2664 42.0056 83.2575L58.1424 65.8134C58.4853 65.4427 58.9324 65.1846 59.4249 65.0729L82.6003 59.8201C89.255 58.3118 90.6017 49.4222 84.6925 46.0105Z" fill="black" stroke="white" stroke-width="5"/></svg>

And add it to your html file.

•Of course, if you want to made it in jQuery, you need to add this script above your js file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

•Then add this (in your JavaScript file):

let timedelay = 1;

function delayCheck() {
  if (timedelay == 2) { //Here you can change this value which changes the time it takes the mouse to hide
    $('#cursor').fadeOut();
    timedelay = 1;
  }
  timedelay += 1;
}
$(document).mousemove(function() {
  $('#cursor').fadeIn();
  timedelay = 1;
  clearInterval(_delay);
  _delay = setInterval(delayCheck, 1000);
});
_delay = setInterval(delayCheck, 1000);

Now you'll see just a cursor on the top left of the screen that does what you asked but it's not YOUR cursor, to replace the cursor with the svg do the following:

//in the same js file as before
$(document).mousemove(function (e) {
    $('#cursor').offset({
        left: e.clientX,
        top: e.clientY
    });
});

/* on the css */
html {
cursor: none;
}

If it doesn't work, make sure that you put the jquery file ABOVE the file you wrote. I hope I have helped someone! You might want to check if this really works, here's the demo. (Sorry if my English was bad, I'm italian).

(Tip) You will notice that there are two identical functions, if you want to merge them just replace them with this:

$(document).mousemove(function(e) {
  $('#cursor').fadeIn();
  timedelay = 1;
  clearInterval(_delay);
  _delay = setInterval(delayCheck, 1000);
  $('#cursor').offset({
    left: e.clientX,
    top: e.clientY
  });
});

JQuery hide mouse if it's not moving

3 Answers3

...BUUUUUT...

Linked