Question

This is my first question on stackoverflow, hopefully there is someone who can help answer my question.

Here’s my question: How can i, when movement/motion/activity is detected (by i.e. Javascript using jQuery/MooTools) show or hide a div, or call for any action.

I know it is possible because gmail makes use of it to, for example, when you are inactive for a longer time, your status will be shown as inactive. And when you move with your mouse over de body of the gmail page, the status will be changed from inactive to online.

So hopefully there’s someone that recognizes a script that fulfills my needs.

Thanks in advance,
Leo Behrutt

Answer 1

Attach a listener to document.body.onmousemove. I’m using something similar with great success.

document.body.onmousemove = function () {
    console.log("hey, you moved!");
}

Of course, this will keep firing if you keep moving, so maybe you want a grace period?

(function () {
    var in_grace = false; timout_set = false, grace = 5 * 1000; // 5 seconds
    document.onmousemove = function () {
        if (false === in_grace) {
            in_grace = true;
            timout_set = false;
            console.log("hey, you moved!");    // <-- your code here
        } else if (false === timout_set) {
            timout_set = true;
            setTimeout(function () {
                in_grace = false;
            }, grace);  // set in_grace to false after grace seconds
        }
    }
}());

This should fire the event at most once every 5 seconds.