3

私はここで入手可能なPaulIrishのidle-timerプラグインを使用しています：http：//paulirish.com/2009/jquery-idletimer-plugin/。

5秒間非アクティブになった後、いくつかのdivを非表示にし、ユーザーアクティビティがキャッチされたときにそれらを表示したいと思います。

これが私のコードです：

$(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またはIE8/9では機能しません。明らかに、onmousemoveイベントが問題です。onmousemoveイベントのバインドを解除すると、機能します（ただし、必要なので、これは許容できる修正ではありません）。

あなたはここで例を見つけることができます：

よろしくお願いします、

編集 ：

mousemouveイベントは、idle-timerプラグインにあります。

$.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イベントを削除すると、機能します。

4

1 に答える 1

4

プラグインを使用して div または wathever 要素を 5 秒間非アクティブにした後に非表示にし、再びアクティブにすると表示する必要がない場合は、次のようなスクリプトを思いつきました (chrome、firefox、explorer でテスト済み):

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

(div の代わりにデモンストレーション用の入力を使用)

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

Jクエリ:

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

あなたが求めているものからそう遠くないことを願っています。乾杯！

于 2011-08-26T12:55:55.757 に答える