0

I am creating a reader web application. I want to hide my mouse cursor after an idle time and it will be showed up when I move the mouse for my webpage using JavaScript, CSS.

What is best way to achieve it?

thanks

Anoop
  • 23,044
  • 10
  • 62
  • 76
  • 1
    Duplicate question: http://stackoverflow.com/questions/1071356/is-it-possible-to-hide-the-cursor-in-a-webpage-using-css-or-javascript – FluffyJack Sep 15 '12 at 13:26
  • 1
    It's not an exact duplicate. The time part was not covered there. You can easily add that by using a `setTimeout` on a hide function and clearing and resetting the timeout ID `onMouseMove`. – Jasper de Vries Sep 15 '12 at 13:37

1 Answers1

1

This worked for me (taken from https://gist.github.com/josephwegner/1228975).

Note reference to an html element with id wrapper.

//Requires jQuery - http://code.jquery.com/jquery-1.6.4.min.js
$(document).ready(function() { 


    var idleMouseTimer;
    var forceMouseHide = false;

    $("body").css('cursor', 'none');

    $("#wrapper").mousemove(function(ev) {
            if(!forceMouseHide) {
                    $("body").css('cursor', '');

                    clearTimeout(idleMouseTimer);

                    idleMouseTimer = setTimeout(function() {
                            $("body").css('cursor', 'none');

                            forceMouseHide = true;
                            setTimeout(function() {
                                    forceMouseHide = false;
                            }, 200);
                    }, 1000);
            }
    });
});
cby016
  • 1,121
  • 1
  • 10
  • 13