idle stae

by chris callaghan

HTML

<dialog id="window">  
    <h3>Need Some Help??</h3>  
    <p>Why not click our number 07000 and give us a call?<br>
    or we can call you back if you want? Just click HERE
    </p>  
    <button id="exit">Close Dialog</button>  
</dialog>  
<button id="show">Show Dialog</button>

CSS

dialog {  
    max-width: 500px;  
    background:#e8e8e8;
    border: 2px solid gold;
    font-family:sans-serif;
    text-align:center;
    line-height:1.3;
    color:#fff;
    background:#000;
    border-radius:10px;
    padding: 5px 10px 20px 20px;
}

JavaScript

$(document).ready(function (){
    $('#show').click(
  
        function(){
        $('#window').show();
        });
        $('#exit').click( 
             function(){
        $('#window').hide();
        }); 
});
idleTimer = null;
idleState = false;
idleWait = 15000;

(function ($) {

    $(document).ready(function () {
  
        $('*').bind('mousemove keydown scroll', function () {
        
            clearTimeout(idleTimer);
                    
            if (idleState == true) { 
                
                // Reactivated event
                   
            }
            
            idleState = false;
            
            idleTimer = setTimeout(function () { 
               
               $('#show').trigger('click');
        
                
                

                idleState = true; }, idleWait);
        });
        
        $("body").trigger("mousemove");
    
    });
}) (jQuery);