2011-07-19 3 views
3

Я использую плагин Idle-timer от 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, он работает (но мне это нужно, поэтому это не приемлемое решение для меня).

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

С наилучшими пожеланиями,

EDIT:

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 из плагина, он работает.

+0

«Очевидно, что событие onmousemove является проблемой» - но вы не указали эту часть кода –

+0

Извините, что на самом деле я загружаю плагин idle-timer. В плагине есть следующий код: 'code'events = 'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove';' code' –

+0

где находится onmousemove –

ответ

4

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

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

(Использование входа для демонстрации вместо дел)

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

Надеюсь, что это недалеко от того, что вам нужно. Приветствия!

+0

Я добавил touchmove для мобильных устройств. $ (document) .bind ('mousemove keypress touchmove', function() { – pinkp

Смежные вопросы