I have a line of text wrapped in a div that I want to be hidden initially and then revealed after 5 seconds from page load. I have a couple other functions that I don't want it to interfere with here.
<script type="text/javascript">
function sleep() {
setTimeout("countdown()", 5000);
}
var ss = 6;
function countdown() {
ss = ss-1;
if (ss<0) {
window.location="/";
}
else {
document.getElementById("countdown").innerHTML=ss;
window.setTimeout("countdown()", 1000);
}
}
</script>
<body onload="sleep()">Your transaction was successful.
<div id="div1"><p><em>You will be redirected to the homepage in <span id="countdown">5</span> second(s).</em></p></div>
I have a line of text wrapped in a div that I want to be hidden initially and then revealed after 5 seconds from page load. I have a couple other functions that I don't want it to interfere with here.
<script type="text/javascript">
function sleep() {
setTimeout("countdown()", 5000);
}
var ss = 6;
function countdown() {
ss = ss-1;
if (ss<0) {
window.location="http://www.mywebsite./";
}
else {
document.getElementById("countdown").innerHTML=ss;
window.setTimeout("countdown()", 1000);
}
}
</script>
<body onload="sleep()">Your transaction was successful.
<div id="div1"><p><em>You will be redirected to the homepage in <span id="countdown">5</span> second(s).</em></p></div>
- The posted code seems to work fine, what's the issue ? – adeneo Commented Dec 12, 2015 at 21:37
4 Answers
Reset to default 2Sorry if I was unclear with what I needed. I found the solution here. It may not be good practice for coding given the many functions, I'm pretty new at this, but it works for my purposes. I will post it here for others:
<body onload="sleep()">
<p align="center">Your transaction was successful. Thank you for your donation to...</p>
<div align="center" id="redirect" style="visibility: hidden">
<h4>You will be redirected to the homepage in <span id="countdown">5</span> second(s)...</h4>
</div>
<script type="text/javascript">
function showRedirect() {
document.getElementById("redirect").style.visibility = "visible";
}
setTimeout("showRedirect()", 2500);
function sleep() {
setTimeout("countdown()", 2000);
}
var ss = 6;
function countdown() {
ss = ss-1;
if (ss<0) {
window.location="http://www.mywebsite./";
}
else {
document.getElementById("countdown").innerHTML=ss;
window.setTimeout("countdown()", 1000);
}
}
</script>
make it invisible when page load :
<div id="div1" style="display:none"><p><em>You will be redirected to the homepage in <span id="countdown">5</span> second(s).</em></p></div>
then make it visible after 5 secods after page loaded:
$(function(){
setTimeout(function(){
$('#div1').show();
},5000);
});
Here's how to do it with vanilla JS. This waits for the DOM to have fully loaded, then counts down for 5 seconds before redirecting you.
document.addEventListener('DOMContentLoaded', function() {
var seconds = 5;
var countdownEl = document.querySelector('#countdown');
setInterval(function() {
if (seconds === 0) {
window.location = "http://www.mywebsite./";
return;
}
countdownEl.innerHTML = --seconds;
}, 1000);
});
There's a working example at http://jsbin./cuhepojuma/edit?html,js,output
Use setTimeout method to execute any custom JavaScript code after a specific time. You may show your div inside that.
setTimeout(function(){
$("#SomeDivId").show();
}, 5000);
The callback will be queued to task queue after 5 seconds and the event loop will execute it after if finishes executing other items present in the queue.
Assuming you have a div with id SomeDivId in your page.
<div id="SomeDivId" style="display:none;">Test</div>
You can wire up execute this code in your load event or DOMContentLoaded event. DOMContentLoaded will be fired when your DOM is ready and rendered, while load will be fired after all sub resources (ex :images/scripts) are downloaded.
Here is how you wire it up to load event
window.onload = function ()
{
setTimeout(function(){
$("#SomeDivId").show();
}, 5000);
};
And Here is how you wire it up on DOMContentLoaded event
document.addEventListener("DOMContentLoaded", function ()
setTimeout(function(){
$("#SomeDivId").show();
}, 5000);
});
Here is a working sample.