I want this div to load instantly on page load (or thereabouts) and then automatically refresh every 10 seconds.
This is what I have, which refreshes every 10 seconds but doesn’t load instantly.
Can I set the initial refresh to say 100ms and then after that refresh every 10 seconds?
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#now-playing').load('now-playing-info.php').fadeIn("fast");
}
, 10000); // refresh every 10000 milliseconds
</script>
You need to run it once first.
<script type="text/javascript">
$(function() {
function nowPLaying()
{
$('#now-playing').load('now-playing-info.php').fadeIn("fast");
}
nowPLaying();
var auto_refresh = setInterval(nowPLaying, 10000); // refresh every 10000 milliseconds
});
</script>
You could just load it, then set the interval:
$('#now-playing').load('now-playing-info.php').fadeIn("fast");
var auto_refresh = setInterval(function (){
$('#now-playing').load('now-playing-info.php').fadeIn("fast");
}, 10000);
You could forgo the whole setInterval() for a setTimeout() instead. For instance:
var loadNowPlayingInfo = function(){
$('#now-playing').load('now-playing-info.php').fadeIn("fast");
setTimeout(loadNowPlayingInfo, 10000);
}
loadNowPlayingInfo(); // Calls the function, then starts your interval
I would consider the second the better option. Note as well, you might want to but the setTimeout() in the success handler of the .load() so it waits for the previous to load.
Related
I want to redirect my page to another one if I stay there for a certain time. I tried to write the following script and I put it in the head of my webpage but it doesn't work. The location where to move isn't a real url because I'm on XAMPP.
$(document).ready(setTimeout(function () {
window.location.replace("../index.php");
}, 5000););
The way you have given is totally wrong, causes a Syntax Error. Check your console. The ready() function expects a function and not an integer (as returned by setTimeout()).
Try this way:
$(function () {
setTimeout(function() {
window.location.replace("../index.php");
}, 5000);
});
Or if you want to use only after 5 seconds of inactivity, you need to use a different approach by checking the user activity (keypress, mousemove) and then clear the timer and restart it.
If you wanna try the redirect after 5 seconds of inactivity, you can do this:
var timer = 0;
function startRedirect() {
timer = setTimeout(function () {
window.location.replace("../index.php");
}, 5000);
}
function restartTimer() {
clearTimeout(timer);
startRedirect();
}
$(function () {
startRedirect();
$(document).mousemove(restartTimer).keyup(restartTimer);
});
You can do it without JS by putting right meta tag into your header
<head>
<meta http-equiv="Refresh" content="5; url=http://google.com">
</head>
where "5" is wait timeout.
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>
In my below code / JS. I would simply like to 'refresh' the page after the click handler fires (or after button is clicked).. after about 2 or 3 seconds after the click has fired. So basically button clicked, 2-3 seconds have passed and then the page refreshes. I want to do it with pure JS, not jQuery or use of <meta>
Below is my JS:
$('.download-pdf').click(function() {
// I would like to add here
notChecked = $("input[type=checkbox]:not(:checked)").parent();
notChecked.hide();
yesChecked = $("input[type=checkbox]:checked").parent();
$.each(yesChecked, function( index, el ) {
$(el).show().html(texts[$(el).attr('id')]);
});
use setTimeout()
setTimeout(function(){
location.reload();
},3000);
You can use the simple settimeout() function to delay a function after a certain amount of time
You can use location.reload(); to refresh a page, I use it myself after updating data.
The delayinmiliseconds represents the amount of seconds you want before the page reloads. It is represented in milliseconds, so 1 seconds/1000. In this case you would want to put 3000.
Here is an example:
setTimeout(function(){
location.reload();
}, thedelayinmiliseconds);
To reload your page after 2 sec, use following
setTimeout(function(){ window.location.reload()}, 2000);
$('.download-pdf').click(function(event) {
//remove default click behavior
event.preventDefault();
//refresh page after 3 seconds
setTimout( 'window.location.reload()', 3000);
notChecked = $("input[type=checkbox]:not(:checked)").parent();
notChecked.hide();
yesChecked = $("input[type=checkbox]:checked").parent();
$.each(yesChecked, function( index, el ) {
$(el).show().html(texts[$(el).attr('id')]);
});
}
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.
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.