I need to redirect users to a different page after 12 seconds and I do this with i.e code. However I’d like to show them a simple countdown in any div so they know that this is about to happen in 12 (11, 10, 9….1, 0) seconds
This will need to be written with jQuery. Thanks
<meta content="120; url=http://www.example.com" http-equiv="refresh" />
You can use something like this instead:
<div id="counter">12</div>
<script>
var count = 12;
var timer = setInterval(function() {
if (--count < 1) {
clearInterval(timer);
window.location.href = "http://www.example.com/";
}
$("#counter").text(count);
}, 1000);
</script>
DEMO: http://jsfiddle.net/PeHFc/
Related
Currently, I have this in my HTML code and am not 100% sure on how to redirect to another page I have after the countdown finishes. I am not too familiar with javascript at the moment either, any help is appreciated. I know that when the page loads it takes the current time ( at the .now snippet) and just adds 10 seconds to it rather than a set time the script should end at then display the difference between present and that set time. The issue with this is that when anyone loads this page it would always show a countdown for 10 seconds to it rather than a universal countdown. For example, the time currently is 3:53 and should end at 4:00. Once the time hits 4 push the redirect.
<!--Countdown Script -->
<script type="text/javascript">
$(document).ready(function() {
$('#countdown17').ClassyCountdown({
theme: "flat-colors-very-wide",
end: $.now() + 10
});
});
</script>
You want to get the time from a fixed one. So, utilize Date built-in API instead of jQuery's $.now(), because
This API has been deprecated in jQuery 3.3; please use the native Date.now() method instead.
What time do you want? Determine it beforehand (GMT):
const date1 = new Date('September 13, 2021 04:00:00');
Then, when subtracting the dates you'll get the time remaining.
<!--Countdown Script -->
<script type="text/javascript">
$(document).ready(function() {
$('#countdown17').ClassyCountdown({
theme: "flat-colors-very-wide",
end: date1 - new Date() // gets the difference between determined date and current date
onEndCallback: () => {
window.location.href = "http://www.example.com";
}
});
});
</script>
Remember to handle the case when the time of access was after the pre-defined time.
add a callback parameter (function) to your countdown
<!--Countdown Script -->
<script type="text/javascript">
$('#countdown17').ClassyCountdown({
theme: "flat-colors-very-wide",
end: $.now() + 10,
onEndCallback: function () {
window.location.href = "http://www.newlink.com";
}
});
</script>
If you're trying to redirect and doesn't matter if is using javascript or not, use the tag from the HTML.
<meta http-equiv="refresh" content="10; URL="https://www.mywebsite.com.br/" />
It will count to 10 and redirect to your URL
I'm assuming this is the ClassyCountdown() jQuery plugin you are using: https://github.com/arsensokolov/jquery.classycountdown
If that's the case, it has an onEndCallback which is called once the countdown reaches 0.
So your code would become something like this:
<!--Countdown Script -->
<script type="text/javascript">
$(document).ready(function() {
$('#countdown17').ClassyCountdown({
theme: "flat-colors-very-wide",
end: $.now() + 10,
onEndCallback: function () {
document.location.href = 'https://www.google.com' // <- The url to redirect to
}
});
});
</script>
Updated answer to redirect at an absolute time:
$(document).ready(function() {
setInterval(function() {
// This is when you want the redirect to happen
// This is the absolute time, as reported by the users browser
let hour = 21;
let minute = 18;
let second = 20;
let date = new Date();
if (date.getHours() == hour && date.getMinutes() == minute && date.getSeconds() >= second) {
document.location.href = 'https://www.whatever.com';
}
}, 1000);
});
On a download page, I would like to have it so that when the page loads, a 10 second timer automatically starts. On the page, I would like some text to say something like "You can begin your download in 10 seconds..." Then, after the time is up a download button appears for people to click on and start their download.
How can I do this, and what code do I use to include it into a page?
Ciao, you could use a setInterval and then when time is expired, show a button like this:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<input id="button" type="button" onclick="location.href='https://google.com';" value="DOWNLOAD" />
<script>
// Set the date we're counting down to
var countDownDate = new Date().setSeconds(new Date().getSeconds() + 10);
document.getElementById("button").style.visibility = "hidden";
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = "You can begin your download in " + seconds +" seconds...";
// If the count down is over, write some text and show button to download
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Click DOWNLOAD button";
document.getElementById("button").style.visibility = "visible";
}
}, 1000);
function startDownload() {
// here start the download
}
</script>
</body>
</html>
Well the download part itself has to be worked out with a server, but assuming you have the direct URL of the file, you can set it to an a tag with a download attribute, then for the countdown just use setTimeout for one second set s time, incrementing a variable each time and if it's greater than 9 then call .click() on the a tag to download it
Assuming there is already Div in the page with I'd "counter",
var a=document. createElement ("a")
a.href="direct URL of file goes here"
a.download="file name plus the extension.txt"
var currentSecond=0
function second () {
setTimeout(function () {
currentSecond++
counter. innerHTML= (10-currentSecond)+" seconds to go before download starts automatically"
if(currentSecond > 9)
a.click()
else second ()
}, 1000)
}
second ()
Something like this
<div>
<div id="countdown"></div>
<button type="button">Download</button>
</div>
<script type="text/javascript">
var time = 10;
var interval = setInterval(() => {
time--;
if (time <= 0) {
document.getElementById("countdown").style.display = "none";
document.getElementById("download").style.display = "block";
clearInterval(interval);
} else {
document.getElementById("countdown").innerText = "You can begin your download in" + time + "seconds..."
}
}, 1000);
</script>
i have php page that i want to run simple countdown 60 seconds in a certain area of my page (in the footer) because i have auto refresh code to refresh the page every 60 seconds so i want to show to users that 60, 59, 58, 57.... just a text rolling countdown until it refreshes so it will start again. easy and simple, no need for complete count down scripts as shown online in many sites...
what i could think is a gif animated small icon, that can work but if possible not add an image is better, i just want normal size text as numbers running from 60 to 0 then looping again (even if no looping is fine... page will be refreshed anyway)
what to do?
You cannot do this with PHP since it is server side . You can create using javascript. Please try this code:
<div id="timer">##</div>
<button id="starter" onclick="start('60');">start</button>
<script>
var tme = document.getElementById("timer");
var bt= document.getElementById("starter");
var counting = false;
function start(count) {
//console.log(counting);
if (!counting) {
counting = true;
tme.innerHTML = count;
var timer = setInterval(function() {
if (count >= 0) {
tme.innerHTML = count;
count--;
} else {
clearInterval(timer);
count = arguments[0];
counting = false;
}
}, 400);
}
}
</script>
Hope this will help
I'm trying to write a code which will auto-refresh an iframe window if the src='http://www.url.com', else if the iframe source is different then don't auto-refresh.
Is there a way to do this?
It would be great if you had post some code that you try.
You need to set an id to your your iframe and get it using getElementById
var myIframe = document.getElementById("myIframe");
To auto refresh with a predetermined interval, you will need setInterval
To verify that your iframe source is the desired one, usae an if statement:
setInterval
( function()
{
if ( myIframe.src == "http://www.url.com" )
myIframe.src = myIframe.src;
}, 60000 );
Here is a jsfiddle that auto-refresh the iframe at each 60 seconds if the source is the one specified
Try this:
window.setInterval(function() {
var els = document.getElementsByTagName("IFRAME");
for(var i=0;i<els.length;++i) {
if(els[i].src=="http://www.url.com/") {
els[i].contentWindow.document.location.href = els[i].contentWindow.document.location.href;
}
}
},1000);
1000 mean's - every one second.
Good luck!
I'm making a rolling screen based in PHP, i use javascript to load a page every 10 seconds. Here is what I have so far:
<script>
setInterval(function(){
$('#container').fadeOut('slow').load('screener.php').fadeIn("slow");
},10000);
</script>
so i'm guessing I need a count to load either screener.php or if the count = 5, load alternate.php.
Yes, that is exactly what you need to do.
var counter = 0;
setInterval(function(){
if (counter % 5 === 0) {
$('#container').fadeOut('slow').load('alternate.php').fadeIn("slow");
} else {
$('#container').fadeOut('slow').load('screener.php').fadeIn("slow");
}
counter++;
},10000);