How to show Div after a Specific time of page load?

Question

I have pretty much knowledge of CSS but I am totally new in Javascript, so I don't know how to do the following task, need your help.

I want to show a fixed div in the bottom of a screen but it should only appear after a specific period of time, suppose 10 seconds, how to do that with the following code.

CSS

.bottomdiv
{
   position: absolute;
   left:    0;
   right:   0;
   z-index : 100;
   filter : alpha(opacity=100);
   POSITION: fixed;
   bottom: 0;
}

HTML

 <div class="bottomdiv">
    <iframe src="http://example.com" width="990" height="110" scrolling="no"></iframe>
 </div>

Thanks.

Possible duplicate of [Call function with setInterval in jQuery?](http://stackoverflow.com/questions/5484205/call-function-with-setinterval-in-jquery) — Bharat, Nov 16 '16 at 12:21

score 5 · Answer 1 · answered Nov 16 '16 at 12:20

There is the jQuery tag in your question, so I bet you're using jQuery. You can do this:

// Execute something when DOM is ready:
$(document).ready(function(){
   // Delay the action by 10000ms
   setTimeout(function(){
      // Display the div containing the class "bottomdiv"
      $(".bottomdiv").show();
   }, 10000);
});

You should also add the "display: none;" property to your div css class.

score 4 · Answer 2 · answered Nov 16 '16 at 12:25

You need small chnage in your css as well,

.bottomdiv{
   left:    0;
   right:   0;
   z-index : 100;
   filter : alpha(opacity=100);
   position: fixed;
   bottom: 0;
   display: none
}

And as my other fiend suggest, you need to show the div 10 sec through js,

$(document).ready(function(){
   setTimeout(function(){
      $(".bottomdiv").show();
    }, 10000);
});

score 3 · Answer 3 · edited Nov 16 '16 at 13:25

3

Example without using Jquery, just pure Javascript:

<!DOCTYPE html>
<html>
<body>
    <div id='prova' style='display:none'>Try it</div>

    <script>
        window.onload = function () {
            setTimeout(appeardiv,10000);
        }
        function appeardiv() {
            document.getElementById('prova').style.display= "block";
        }
    </script>

</body>
</html>

edited Nov 16 '16 at 13:25

Samir

1,312
1
10
16

answered Nov 16 '16 at 12:33

Sergi

71
8

score 3 · Accepted Answer · answered Nov 16 '16 at 12:33

Use Timeout with JS. I set it as 5 sec. Also the working fiddle. It's a good practice to add/remove class for these kind of activities
https://jsfiddle.net/ut3q5z1k/
HTML

  <div class="bottomdiv hide" id="footer">
   <iframe src="http://example.com" width="990" height="110"  scrolling="no"></iframe>
  </div>

CSS

.bottomdiv
{
 position: absolute;
 left:    0;
 right:   0;
 z-index : 100;
 filter : alpha(opacity=100);
 POSITION: fixed;
 bottom: 0;
}
.hide {
 display: none;
}

JS

setTimeout(function(){
 document.getElementById('footer').classList.remove('hide');
}, 5000);

How to show Div after a Specific time of page load?

4 Answers4

Linked