CODEWITHSUNDEEP
javascriptjqueryhtml
Clinton Jooooones
Clinton Jooooones

Reputation: 1037

JQuery hide mouse if it's not moving

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.

Upvotes: 7

Views: 9072

Answers (3)

Lorenzo Cerato
Lorenzo Cerato

Reputation: 1

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
  });
});

Upvotes: 0

Lovro
Lovro

Reputation: 185

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.

Upvotes: 0

mVChr
mVChr

Reputation: 50205

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.

Upvotes: 5

Related Questions