detect mouse inactivity

[Kovo88]

i know gmail does this, but how can iI use javascript to detect inactivity in a certain DIV for example then return a function or anything else?

[PeejAvery]

1. Create a variable named mouseActive.
2. Set the onmousemove event in that div tag to fire a function that sets mouseActive = timestamp.
3. Set a function to check the value of that variable.
4. Use setTimeout() to call that function every X amount of seconds. (X = inactive period check)

[Kovo88]

cool, to explain mor ein depth, I want this script to function like a screensaver for my site... so basically, it will pole mouse movement say ever 10 seconds. If there is no mouse movement for more than say 180 seconds I want the script to execute another function. of course, once the mouse is moved after being inactive for more than 180 seconds, it will execute another function.


Thing is I dont think ur suggestion covers all that :P

Im a good clean coder in xhtml, css and XML, but when it comes to js, im a bit new

thannks

[andreasblixt]

Here's a simple screen saver class:

// waitTime is in milliseconds.
var ScreenSaver = function (waitTime) {
    this.lastActivity = new Date().getTime();
    this.waitTime = waitTime;

    var $this = this;
    this._timer = setInterval(function () { $this._checkTime.call($this) }, 1000);
    document.onmousemove = function () { $this._mouseHandler.call($this) };
};

ScreenSaver.prototype = {
    _timer: null,

    lastActivity: 0,
    started: false,
    waitTime: 0,

    onstart: function () {},
    onend: function () {},

    dispose: function () {
        if (this._timer) clearInterval(this._timer);
        document.onmousemove = null;
    },

    _checkTime: function () {
        if (!this.started && new Date().getTime() - this.lastActivity >= this.waitTime) {
            this.started = true;
            this.onstart();
        }
    },

    _mouseHandler: function () {
        this.lastActivity = new Date().getTime();
        if (this.started) {
            this.started = false;
            this.onend();
        }
    }
};

var ss = new ScreenSaver(5000);

ss.onstart = function () {
    document.getElementsByTagName("body")[0].style.backgroundColor = "#000";
};

ss.onend = function () {
    document.getElementsByTagName("body")[0].style.backgroundColor = "#fff";
};

[PeejAvery]

Thing is I dont think ur suggestion covers all that :P

Yes, it does. You just have to do a touch of improvisation.

[Kovo88]

andreas, your script is exactly what I need and it works great... please give me ur name or website so that I may credit you for the script

Peej, thank you as well, i will use ur tips to improve this and other scripts

[andreasblixt]

Well my name shouldn't be hard to guess, I have a website (http://mezane.org/) but I barely ever update it.

[Kovo88]

nice, ill email u once this project is up and running