loading a div 1 minute after the page loads

Question

I have a div with id notifications in the home page. I don't want the div to be load when the page loads for the first time, I want it to load after 1 min. Is there any way in javascript or jquery to do what I want?

Answer 1

I'm not sure how you want to actually add your div into the DOM, but you can use setTimeout to delay for a minute. From the docs :

Calls a function or executes a code snippet after specified delay.

So something like this:

function appendDiv() {
  ... append code here...
}

timeoutID = window.setTimeout(appendDiv, 60000);

Answer 2

Sure :) in my example i use jQuery:

<div style="display:none" id="notifications"></div>

<script type="text/javascript">
$(document).ready(function() { 
    setTimeout(function() { 
        $.get('/notifications.php', function(result) {
            // build your notifications here
            // ...
            $('#notifications').show(); 
        }, 'json');
    }, 60000);
});
</script>

Answer 3

if the notification should not be in the DOM at all for the first minute, use following code:

$(document).ready(function(){
  setTimeout( function(){
    $("<div>")
      .html( "your notification message/markup" )
      .attr({ id : 'notification', ... })
      .appendTo( "body" /* or any other DOM element */ );
  }, 60*1000);
})

Answer 4

Using jQuery's load function:

setTimeout(function() {
    $('#myDiv').load('divcontents.html');
}, 60 * 1000);

divcontents.html can be dynamically generated on the server.