24

I am able to find the cursor position. But I need to find out if the mouse is stable. If the mouse wasn't moved for more than 1 minute, then we have to alert the user.

How its possible, are there any special events for this? (Only for IE in javascript)

splattne
  • 102,760
  • 52
  • 202
  • 249
praveenjayapal
  • 37,683
  • 30
  • 72
  • 72

7 Answers7

64

Set a timeout when the mouse is moved one minute into the future, and if the mouse is moved, clear the timeout:

var timeout;
document.onmousemove = function(){
  clearTimeout(timeout);
  timeout = setTimeout(function(){alert("move your mouse");}, 60000);
}
RoelF
  • 7,483
  • 5
  • 44
  • 67
Marius
  • 57,995
  • 32
  • 132
  • 151
  • I see a potential problem: Every call to setTimeout returns a number for a counter. When will it wrap around and what happens then? I suggest a setInterval(update,1000) instead, where 'update' increments a variable that the onmousemove event resets. If the variable gets over 60 in update, alert user – some Mar 04 '09 at 11:05
3

Here's a one-and-done function that can check any element for movement:

function mouse (element, delay, callback) {

   // Counter Object
   element.ms = {};

   // Counter Value
   element.ms.x = 0;

   // Counter Function
   element.ms.y = function () {

      // Callback Trigger
      if ((++element.ms.x) == delay) element.ms.callback(element, element.ms);
   };

   // Counter Callback
   element.ms.callback = callback;

   // Function Toggle
   element.ms.toggle = function (state) {

      // Stop Loop
      if ([0, "off"][state]) clearInterval(element.ms.z);

      // Create Loop
      if ([1, "on"][state]) element.ms.z = setInterval(element.ms.y, 1);
   };

   // Function Disable
   element.ms.remove = function () {

      // Delete Counter Object
      element.ms = null; return delete element.ms;
   };

   // Function Trigger
   element.onmousemove = function () {

      // Reset Counter Value
      element.ms.x = -1;
   };

   // Return
   return element.ms;
};

Usage: mouse(element, delay, callback)

Examples: Make a video player hide the mouse after 5 seconds when idle and fullscreen

let x = mouse(video, 5000, function (a) {
   if (document.webkitIsFullScreen) video.style.cursor = "none";
});

x.toggle(1); addEventListener("mousemove", function () {
   video.style.cursor = "auto";
});

Chat Room AFK (45 Seconds) (assuming you have a chat box and a send message function):

let x = mouse(chatBox, (45e3), function (a) {
   chatBox.send({ text: chatBox.username + " is AFK.", italic: true });
});

x.toggle(1); x.addEventListener("mousemove", function () {
  chatBox.send({ text: chatBox.username + " is no longer AFK", italic: true });
});
imaxwill
  • 113
  • 8
1

Is there not a way to set a timer to start incrementing after every mouse movement event?

If it gets to a minute then pop up the message box, but every time the mouse moves the timer gets reset.

1

Use a timer that resets its value on mousemove event. If timer reaches 1 minute --> Do something.

More info on timer here http://www.w3schools.com/js/js_timing.asp
And more info on catchin mouse events here http://www.quirksmode.org/js/events_mouse.html

Peter Gfader
  • 7,673
  • 8
  • 55
  • 56
1

Yes, you have a onmousemove event in Javascript, so to achieve what you need you just have to do code something like this:

startTimer();
element.onmousemove = stopTimer(); //this stops and resets the timer

You can use it on the document body tag for instance.

UPDATE: @Marius has achieved a better example than this one.

rogeriopvl
  • 51,659
  • 8
  • 55
  • 58
0

You can use the onmousemove event. Inside it, clearTimeout(), and setTimeout(your_warning, 1 minute).

angus
  • 2,305
  • 1
  • 15
  • 22
0

You could use this script/snippet to detect the mouse pointer position and "remember" it. Then use a timer "setTimeout(...)" to check the position let's say every second and remember that time.

If more than one minute passed and the position hasn't changed, you could alert the user.

splattne
  • 102,760
  • 52
  • 202
  • 249