Search code examples
javascriptjquerytimeoutdelayshow-hide

Show Div 5 Seconds after Page Load

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.com/";
}
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>
Solution

  • Sorry 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.com/";
            }
            else {
                document.getElementById("countdown").innerHTML=ss;
                window.setTimeout("countdown()", 1000);
            }
        }
    </script>