Delay object display

In Category Tips and Tricks
Article published 28/07/2011 02:35:07pm
Delay object display

Delay the display of certain parts of your webpage until a specified number of seconds after the page has loaded with this easy to implement trick! Specific parts of the page content can be displayed as and when you choose!

Delaying the display of page content is quite a straight-forward task with Javascript. In order to implement it on your page, you will first need to do the following; give the content (for example a div, a table or a fieldset) a unique ID, and give it the style attribute of display:none:
<div id="my_div" style="display:none;">
This div and its contents are hidden when the page loads!
Then, in order to get the content displayed after the page loads, we simply need to add a window timeout event to start from the bodys onload event which which change the display attribute of this element:
<body onload='setTimeout(""document.getElementById(\"my_div\").style.display=\"block\";", 5000);'>
This changes the display attribute to block (visible) for the element my_div 5,000 milliseconds (or five seconds) after the page has loaded! A full example is as follows:
onload='Javascript:setTimeout("document.getElementById(\"my_div\").style.display=\"block\";", 5000);'>
<div style="display:none;" id="my_div">This is a test</div>