Скрыть кучу Div после отсутствия активности пользователя - PullRequest
Новая
       21

Скрыть кучу Div после отсутствия активности пользователя

3 голосов
/ 19 июля 2011

Я использую плагин таймера простоя Paul Irish, доступный здесь: http://paulirish.com/2009/jquery-idletimer-plugin/.

Я хочу скрыть некоторые элементы div после 5 секунд бездействия и показать их обратно, когда активность пользователя перехватывается.

Вот мой код: 

$(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);
    });
 });

Он отлично работает в Firefox / Safari / Mobile Safari, но я не могу заставить его работать в Chrome или IE 8/9. Очевидно, что событие onmousemove является проблемой, если я отменяю привязку к событию onmousemove, оно работает (но оно мне нужно, так что это не приемлемо для меня)

Вы можете найти пример здесь:

С уважением,

РЕДАКТИРОВАТЬ:

Событие mousemouve находится в плагине таймера простоя. 

$.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

если я удаляю событие mousemove из плагина, оно работает.

1 Ответ

4 голосов
/ 26 августа 2011

Если вам не нужно использовать плагин и скрывать элементы div или wathever после пяти секунд бездействия и показывать его, как только он снова станет активным, я придумал такой скрипт (проверено в chrome, firefox, explorer):

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

(Использование входа для демонстрации вместо 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;
});

Надеюсь, это недалеко от того, что вы ищете. Ура!

...