We Keep Coding

How to refresh or reload a page with timeout in javascript or jquery

How can I refresh or reload a page with timeout in javascript or jquery only when
a specific class is visible
or
img is not found
i found this https://stackoverflow.com/a/14787543/7051635 but there is no timeout and when i'm in front of an omg not found, nothing happened.

Use the setTimeout() global method to create a timer. This will reload the page after 5000 milliseconds (5 seconds):
setTimeout(function(){ location.reload(); }, 5000);
This code can be added to any event you need it to. So, for example:
var theDiv = document.querySelector("div");
// When the div is clicked, wait 5 seconds and then hide it.
theDiv.addEventListener("click", function(){
setTimeout(function(){
theDiv.classList.add("hide");
}, 5000);
});
.hide { display:none; }
<div>Now you see me.</div>

Wait before starting JavaScript function

I'm trying to play a sound every time a user gets a new notification. The way I am loading the notifications on my page is simple:
(function($)
{
$(document).ready(function()
{
var $container = $("#noti");
$container.load("notify.php");
var refreshId = setInterval(function()
{
$container.load('notify.php');
}, 1000);
});
})(jQuery);
This works by updating a div container with whatever number the PHP code sends out. it retries every second (probably not the most efficient way, but it works).
I have another piece of code that checks when the div content changes, then creates an alert box (which I will change to playing a sound when the script is done):
var myElement = document.getElementById('noti');
if(window.addEventListener) {
// Normal browsers
myElement.addEventListener('DOMSubtreeModified', contentChanged, false);
} else
if(window.attachEvent) {
// IE
myElement.attachEvent('DOMSubtreeModified', contentChanged);
}
function contentChanged() {
// this function will run each time the content of the DIV changes
alert("js is working");
}
This script works, however it also creates an alert or the first loading of the notifications. This is because it starts of as an empty div, then it loads the data, which sets off this alert script. The only way I could think about going round this is delaying the script from loading for a couple of seconds whilst the AJAX script does its business.
Does anyone know a way I could delay this second script from doing anything for the first few seconds after page load, or perhaps a better way about going round this?

Instead of doing that, use a custom event which you trigger when load finishes:
var refreshId = setInterval(reloadContainer, 1000)
function reloadContainer() {
$container.load('notify.php', function success() {
$container.trigger('loaded')
})
}
$(myElement).on('loaded', contentChanged)

Load function on pageshow and stop on leaving the page with jQuery Mobile

I'm having a trouble with running function for checking new messages in table. When I open the message_page I want this 'setInterval' function to start running, but after leaving the page stop running (I have one html file with multiple pages). Is there a way to do that? Because my script keeps running even after leaving the page.
$(document).on('pageshow', '#message_page', function(){
$('#chat_box').scrollTop($('#chat_box').height());
setInterval( function() {checkNewMessages(c_key,m_fid);},1000);
});

Here's a working example: http://jsfiddle.net/Gajotres/QUCUt/
$(document).on('pagebeforeshow', '#index', function(){
timerHandler.timer1 = setInterval(function () {
$('#test-input').val(parseInt($('#test-input').val()) + 1);
}, 1000);
});
$(document).on('pagebeforehide', '#index', function(){
clearInterval(timerHandler.timer1);
});
var timerHandler = {
timer1 : null
}
Let me explain. If you create a timer as a object variable, it can be accessed at any moment. In this case pagebeforeshow event will start timer and pagebeforehide will pause it. You can test it on my example, just let it run a little bit, then go to the second page, wait a bit and return back. You will see that timer has been paused.

setInterval update ajax column unless mouseover

I have a column in my web design, which is periodically refreshed by a JS function "refreshColumn()" and updated by AJAX.
setInterval('refreshColumn()',60000);
function refreshColumn() {
..make call with AJAX and load response to element...
document.getElementById('myColumn').innerHTML = xmlhttp.responseText;
}
This is okay, however, it's not very practical when my user is actually using that column and it refreshes on them!
Is it possible to modify what I have already, to incorporate an 'onmouseover' event that will stop the function from running the AJAX and refreshing the column, and 'onmouseout' allows the script to refresh again?

You would use a timeout instead of an interval, and just clear it on mouseover and reset it on mouseout.
Live Demo
var timeout = setTimeout(refreshColumn,60000);
function refreshColumn() {
// ajax call ect. reset the timeout
timeout = setTimeout(refreshColumn,60000);
}
element.onmouseover = function(){
clearTimeout(timeout);
}
element.onmouseout = function(){
timeout = setTimeout(refreshColumn,60000);
}

jquery reload div X amount of seconds problem

I know there are a million examples and tutrials on how to reload a DIV in jquery every X amount of seconds, here is the example code I am using right now
<script>
var auto_refresh = setInterval(
function(){
$('#notificationcontainer').load('http://localhost/member/beta_new/notifications.inc.php').
fadeIn("slow");
}, 10000);
</script>
The above code loads the DIV notificationcontainer
My problem is I need to load DIV notificationcontainer on page load and then refresh every X amount of seconds, this code currently makes the page wait X amount of time on initial page load and I need to show the div right away on page load but then also update it every X amount of time, please help

Create a function which loads the DIV, call it once in document.ready and pass it to setInterval function so that will be called periodically.
<script>
var refreshNotification =
function()
{
$('#notificationcontainer').load('http://localhost/member/beta_new/notifications.inc.php');
fadeIn("slow");
};
$(document).ready(
function()
{
refreshNotification();
var autoRefresh = setInterval(refreshNotification, 10000);
}
);
</script>

Run the function before calling setInterval

Just move the function() out, give it a name, then onload call that function along with a setInterval that calls the same function.