i want to make a 20 seconds countdown timer, when timer comes to zero it refreshes iframe. and then after refreshing iframe timer again comes to 20 seconds and after it comes 0 it again refreshes iframe. how can i do this, i have a js timer script which refreshes the iframe but i don't know how to make this script run again and again.
<script>
var tT;
var timer=20;
var stop;
$(document).ready(function(){
tT=document.getElementById('timer');
tT.value=timer;
stop=setInterval(function(){
if(timer>0){
timer--;
tT.value=timer;
}else{
clearInterval(stop);
}},1000);
setTimeout(function(){
document.getElementById('timer').value = timer;
document.getElementById('exchanger').src = document.getElementById('exchanger').src;
},20000);
});
</script>
Iframe :-
<input id="timer" value="20" type="text" size="2" readonly style="border:none;background:transparent;width:18px;text-align:center">
Use
setInterval(function, delay)
Here is the code for your function
(function(){
// do some stuff
setTimeout(arguments.callee, 20000);
})();
for reference, this question is already marked here on below link:
Calling a function every 60 seconds
Here is a sample code to help you out:
function loadlink() {
$('#iframeId')[0].contentWindow.location.reload(true);
}
loadlink(); // This will run on page load
var count = 1;
setInterval(function() {
$(".timer").text(count)
count++;
if (count == 20) {
loadlink() // this will run after every 20 seconds
count = 0;
}
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer"></div>
<iframe id="iframeId" class="myframe" name="myframe" src="http://google.com"></iframe>
I followed Albzi's suggestion (who commented on my question), I
Used setInterval instead of setTimeout and It worked!
the final script is:
var tT;
var timer=20;
var stop;
$(document).ready(function(){
tT=document.getElementById('div-ID');
tT.value=timer;
stop=setInterval(function(){
if(timer>0){
timer--;
tT.value=timer;
}else{clearInterval(stop);
}},1000);
setInterval(function(){ // I changed setTimeout here
document.getElementById('Iframe-ID').src = document.getElementById('Iframe-ID').src;
timer=20;
},20000);
});
and HTML: <div id="Div-ID"></div>
Iframe: <iframe id="Iframe-ID" src="source-url"></iframe>
Related
i was searching for the solution, but i cannot find any proper suggestions.
My goal is to loop different external urls on the same page (inside the div), rather than looping the pages with header option. Here is my current code for showing one external page in the div:
<script>
$(document).ready(function(){
function loadlink(){
$('#tableHolder').load('read_data_from_page_one?v=1',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 30000);
});
</script>
So after 30 seconds my div "tableholder" is refreshed, which is ok. Now i would like to add another external page after 5 minutes in the same div, and then after 5 minutes again another external page. They need to be refreshed every 30 seconds as my first external page. After that it needs to load again the first external page.
so basicly loop inside external content in a div. Is that possible?
The other solution is to loop the pages via header options:
<?php header("Refresh: 300; URL=read_data_from_page_two.php"); ?>
But i don't want that. Any suggestions?
Best regards, Misko
If pages are numbered, simple counter will be fine:
$(document).ready(function(){
var counter = 1, // current page
max = 3; // last page
function loadlink(){
$('#tableHolder').load('read_data_from_page_one?v='+counter,function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(loadlink, 30000); // this will run after every 30 seconds
setInterval(function(){
if(++counter > max){ // next page
counter = 1; // back to start
}
}, 5000000); // 5 min interval
});
$(document).ready(function(){
function loadlink(x = 1){
$('#tableHolder').load('read_data_from_page_one?v='+x,function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
var x=1;
setInterval(function(){
x++
loadlink(x); // this will run after every 5 seconds
}, 30000);
});
Is this more or less what you are meaning? An array of links that can be cycled through every n seconds and repeated when all have been displayed?
<script>
$(document).ready(function(){
var links=[
'read_data_from_page_one?v=1',
'read_data_from_page_two.php',
'read_data_from_page_three.php',
/*
..... etc
*/
'read_data_from_page_ninetynine.php'
];
var i=0;
function loadlink(i){
var url=links[i];
$('#tableHolder').load( url, function() {
$(this).unwrap();
});
}
loadlink(i);
setInterval(function(){
loadlink(i);
i++;
if( i>=links.length ) i=0;
}, 30000 );
});
</script>
I have a requirement where I need to call a function repeatedly which calls setInterval. The problem I encountered is, if a function is generated(say every 1second) and it is set using setInterval; if we call setInterval twice/more without a clearInterval in between the function keeps on calling itself.
Ex :
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="myStartFunction()">Start time</button>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar;
function myStartFunction(){
myVar = setInterval(function(){ myTimer() }, 1000);
}
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
console.log(myVar);
clearInterval(myVar);
console.log(myVar);
}
</script>
</body>
</html>
If I click the Start Time button twice without clicking Stop time in between, the function doesn't stop. This is just an example of the scenario. Anyway to resolve this?
In your startFunction, just clear any existing intervals. Otherwise you are creating multiple intervals, but only storing a reference to the last interval created.
For example:
function myStartFunction(){
if(myVar) {
myStopFunction();
}
myVar = setInterval(function(){ myTimer() }, 1000);
}
You are overwriting the same myVar over and over again ... That means the stop function will only stop the last timer started. If you only want at most one setInteval to run, just add a call to the stop function before starting.
I am facing a problem, on my website i am using
<script type="text/javascript">
window.onload = function() {
var countdownElement = document.getElementById('countdown'),
downloadButton = document.getElementById('new_download'),
seconds = 10 ,
second = 0,
interval;
downloadButton.style.display = 'none';
interval = setInterval(function() {
if (second >= seconds) {
downloadButton.style.display = 'block';
countdownElement.style.display = 'none';
clearInterval(interval);
}
second++;
}, 1000);
}
</script>
But some google ads keep on loading and this function don't work. so i thought to stop page load after 10 sec with this script in footer of page
<script type="text/javascript">
setTimeout( function(){
window.stop()
} , 10000 );
</script>
But this is not working, is there any way i can stop page load after some time or skip google ads load time from page load time or other method except window.onload function
Heres a quick jquery code i wrote which worked for me...although i had no google ads. and i got rid of the setInterval()
hope it helps..
$("document").ready(function() {
$("#new_download").css({
"display":"none"
});
setTimeout(displaydbutton,10000);
}
function displaydbutton(){
$("#dload").css({
"display":"block"
});
clearTimeout();
});
So i have a web app with basic authentication.
When im logged in, an Interval is set:
$("#login").click(function(e) {
var interval = setInterval(function(){myFunction();}, 2000); });
Then when im logged out i need to stop the interval:
$("#logout").click(function(e) {
if(typeof interval !== 'undefined') clearInterval(interval); });
But it doesnt work, i think the way to check if an interval exist is wrong...i can set the interval so it is running when im logged in, but i need to stop/clear it when i click on my Logout button and it doesnt...
PS. im using the interval to check "myFunction" automatically every 2 seconds, but maybe there is another way to accomplish this without an interval? thx
Your interval variable needs to be declared at a higher scope where it is available to both functions. As you have it now, it is a local variable that ONLY exists within the particular invocation of your event handler function. So, when the next event handler is called, that previous variable no longer exists. You may also want to protect against successive clicks on login:
var interval;
$("#login").click(function(e) {
if (!interval) {
interval = setInterval(function(){myFunction();}, 2000);
}
});
$("#logout").click(function(e) {
clearInterval(interval);
interval = null;
});
And, you don't need to check to see if interval is undefined. You can just call clearInterval() on it and clearInterval() will protect against any invalid argument you pass it.
Here is a simple example where your interval variable should be in global scope for both click events.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function myFunction(){
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
var interval;
$("#start").click(function(){
interval = setInterval(function(){
myFunction();
},2000);
});
$("#stop").click(function(){
clearInterval(interval);
});
});
</script>
</head>
<body>
<p id="demo"></p>
<button id="start">Start</button>
<button id="stop">Stop</button>
</body>
</html>
Ok coming straight to the point
I have a text box and few other things on a page
if the user is typing in the textbox the page should not refresh otherwise it should refresh after a certain interval
I searched alot and cannot find anything similar
I am new to javascript
Here is a simple example of this. A check runs every 3 seconds. if nothing has been typed in it will refresh, if something has been typed in it will wait 3 seconds before refreshing.
http://jsfiddle.net/9ARrG/
HTML
<input onkeyup="resetTimer = true">
JS
resetTimer = false;
setInterval(function() {
if(!resetTimer) {
location.reload();
}
resetTimer = false;
}, 3000);
Give your input/textarea an id
<input id="textbox" />
// OR
<textarea id="textbox"></textarea>
Then, setup a timer to refresh the page. If there's a change, reset the timer.
var originalTimer = 15000; // here's the original time until page refreshes
var timer = originalTimer; // timer to track whether to refresh page
// now every 1 second, update the timer
setInterval(function() {
timer -= 1000; // timer has gone down 1 sec
// if timer is less than 0, refresh page
if (timer <= 0) window.location.reload();
},1000); // repeat every 1 second (1000 ms)
document.getElementById("textbox").onchange = function() {
// detect textbox changes, reset timer
timer = originalTimer;
}
Use the document.activeElement property to conditionally determine what element has focus.
function refreshPageUnlessFocusedOn (el) {
setInterval(function () {
if(el !== document.activeElement) {
document.location.reload();
}
}, 3000)
}
refreshPageUnlessFocusedOn(document.querySelector('textarea'));
Check out the jsfiddle here for a working sample.