Hide a bunch of Divs after user inactivity

Question

I'm using Paul Irish's idle-timer plugin available here : http://paulirish.com/2009/jquery-idletimer-plugin/ .

I want to hide some divs after 5 seconds of inactivity and show them back when user activity's catched .

Here is my code :

$(document).ready(function(){
    $.idleTimer(5000);
    $(document).bind("idle.idleTimer", function(){
        $("#audio_container").fadeOut(1000);
        $(".breadcrumb").fadeOut(1000);
    });
    $(document).bind("active.idleTimer", function(){
        $("#audio_container").fadeIn(1000);
        $(".breadcrumb").fadeIn(1000);
    });
 });

It works perfectly on Firefox / Safari / Mobile Safari , but I can't make it work on Chrome or IE 8 / 9 . Obviously the onmousemove event is the problem, if I unbind the onmousemove event, it works (But I need it so this is not an acceptable fix for me).

You can find an exemple here :

Best regards,

EDIT :

The mousemouve event is located in the idle-timer plugin .

$.idleTimer = function(newTimeout, elem){

    // defaults that are to be stored as instance props on the elem

    var idle    = false,        //indicates if the user is idle
        enabled = true,        //indicates if the idle timer is enabled
        timeout = 30000,        //the amount of time (ms) before the user is considered idle
        events  = 'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove'; // activity is one of these events

if I remove the mousemove event from the plugin, it works .

"Obviously the onmousemove event is the problem" - but you didn't include that part of the code — citizen conn, Jul 19 '11 at 01:04
Sorry about that actually I'm loading the idle-timer plugin. In the plugin, there's the following code : `code`events = 'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove';`code` — Florian Didron, Jul 19 '11 at 01:05
@citizen con : Thank you for your help, I've edited the main post — Florian Didron, Jul 19 '11 at 01:09
Sorry, I must be confused, but it's working for me in Chrome. IE8 actually crashed every time. — citizen conn, Jul 19 '11 at 01:14
One more thing, on Chrome and IE, the divs fade out if the mouse pointer is not on top of the window . — Florian Didron, Jul 19 '11 at 01:21
Must be my chrome install . I'll have to check on that. So you didn't see the divs disappear on IE8 right ? — Florian Didron, Jul 19 '11 at 01:23
Like I said, IE8 crashed every time, even before the page loaded... but I am using IE9 in IE8 mode for what it's worth. — citizen conn, Jul 19 '11 at 01:24
Must be the text shadow fix I was using making your browser crash . If you try again it should work ok . Thanks again for your help . — Florian Didron, Jul 19 '11 at 01:30
Could you give it a last try, if it's still crashing, it must be IE8 Mode acting up . — Florian Didron, Jul 19 '11 at 01:36
that worked in IE8 and the players controls hide and show as expected! — citizen conn, Jul 19 '11 at 01:47
God I love to here that. Looks like my testing environment is not good and I was chasing the wrong bugs :( . Thanks so much for your help . — Florian Didron, Jul 19 '11 at 01:52
Ok seems to be Working on IE 9 with IE8 Mode on, but not on IE8 itself (tested on XP / 7) : http://eh.akbsystems.jp/sgi-dev/stories/nelson-mandela/ — Florian Didron, Jul 19 '11 at 12:44
@Florian Didron - the fiddle works in IE8 for me. the live link does not — momo, Aug 04 '11 at 18:20
@Florian Didron - notice that the live link has a ton of stuff happening outside DOMReady - specifically IE8 stuff. might try placing that code in the ready handler — momo, Aug 04 '11 at 18:22

score 4 · Answer 1 · answered Aug 26 '11 at 12:55

if u dont have to use the plugin and hide divs or wathever element after five seconds of inactivity and show it once its active again, i came up with a script like so (tested in chrome,firefox, explorer):

http://jsfiddle.net/e8KXw/1/

(Using an input for demonstration instead of div)

<input type="text" > /* Use div or any element */

Jquery:

var interval = 1;

setInterval(function(){
   if(interval == 5){
       /* if intervall reaches 5 the user is inactive hide element/s */
       $('input').hide(); 
       interval = 1;
   }
   interval = interval+1;
    console.log(interval);
},1000);

$(document).bind('mousemove keypress', function() {
    /* on mousemove or keypressed show the hidden input (user active) */
    $('input').show();
    interval = 1;
});

Hope its not far from what you are after. Cheers!

I added touchmove for mobile too. $(document).bind('mousemove keypress touchmove', function() { — pinkp, Oct 22 '17 at 19:30

Hide a bunch of Divs after user inactivity

1 Answers1