CODEWITHSUNDEEP
javascriptjquerytimeoutdelayshow-hide
Christopher
Christopher

Reputation: 113

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>

Upvotes: 0

Views: 15761

Answers (4)

Shyju
Shyju

Reputation: 218942

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.

Upvotes: -2

Christopher
Christopher

Reputation: 113

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>

Upvotes: 2

Kristian Roebuck
Kristian Roebuck

Reputation: 3379

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.com/";
      return;
    }
    countdownEl.innerHTML = --seconds;
  }, 1000);

});

There's a working example at http://jsbin.com/cuhepojuma/edit?html,js,output

Upvotes: 0

Saman Mohamadi
Saman Mohamadi

Reputation: 4672

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);
});

Upvotes: 1

Related Questions