开发者

Hide a bunch of Divs after user inactivity

开发者 https://www.devze.com 2023-03-21 10:04 出处:网络
I\'m using Paul Irish\'s idle-timer plugin available here : http://paulirish.com/2009/jquery-idletimer-plugin/ .

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 catche开发者_如何转开发d .

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 .


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!

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号