Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Something like this should do it. You should be able to adapt it to your needs. I essentially copied the code from the SO question you linked. This adds an active/inactive class to the body. You will see this when you run my code. When the page is active the screen is blue. This indicates refreshing takes place. When the screen is gray then don't bother refreshing. </p> <p>Then you just put a check for the active/inactive class in your code.</p> <p><a href="http://jsfiddle.net/scgEs/1" rel="nofollow">http://jsfiddle.net/scgEs/1</a></p> <pre><code>var refreshrate = 4000; var inactivitytime = 15000; var refreshid; //set to global scope so that you can clear it later var activityTimeoutId; //store timeout for inactivity $('#sbox').slideUp(); $('#toggle').click(function() { $('#sbox').slideDown('fast'); refreshId = setInterval(function() { if ($('body.inactive').length == 1) { $('#sbox').append('&lt;div&gt;No refresh&lt;/div&gt;'); } else { console.log('Refreshing data'); $('#sbox').append('&lt;div&gt;Refreshed...&lt;/div&gt;'); //$('#shout').load('shout.php?randval=' + Math.random()); } }, refreshrate); return false; }); // If theres no activity for X seconds do something activityTimeoutId = setTimeout(inActive, inactivitytime); function resetActive() { $(document.body).attr('class', 'active'); clearTimeout(activityTimeoutId); activityTimeoutId = setTimeout(inActive, inactivitytime); } // No activity do something. function inActive() { $(document.body).attr('class', 'inactive'); } // Check for mousemove, could add other events here such as checking for key presses ect. $(document).bind('mousemove', function() { resetActive() });​ </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload