2011-07-19 2 views
3

ここではポールアイルランドのアイドルタイマープラグインを使用しています:http://paulirish.com/2009/jquery-idletimer-plugin/ユーザーの非アクティブ後にDivsの束を隠す

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の/モバイルSafariで完璧に動作しますが、私はそれがクロムまたは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

実際には私はアイドルタイマーのプラグインをロードしています。プラグインには次のコードがあります: 'code'events = 'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove';' code' –

+0

ここではonmousemoveです –

答えて

4

5秒間アクティブでない状態でプラグインを使用してdivやwathever要素を非表示にして再度アクティブにしなければ、私はそういうスクリプト(chrome、firefox、explorerでテスト済み):

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

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

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

のjQuery(代わりにDIVの実証のための入力を使用して)

あなたの後ろから遠くないことを望みます。 乾杯!

+0

私はモバイル用のtouchmoveも追加しました。 $(document).bind( 'mousemove keypress touchmove'、function(){ – pinkp