Website Header Image
Website Header - Left Main Page Browse Search Website Header - Right
 

 
Affordable Web Design
Want an affordable web design that stands out whilst still looking neat and professional?

 

Delay object display

In Category Tips and Tricks
Article published 28/07/2011 03: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!
</div>
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:
<html>
<body
onload='Javascript:setTimeout("document.getElementById(\"my_div\").style.display=\"block\";", 5000);'>
 
<div style="display:none;" id="my_div">This is a test</div>
 
</body>
</html>
 Shopping cart
Click here to go to your ShoppingCart
Currency
 

 
Holiday Home Advertising Site
Want to run your own Holiday Home Advertising Site?
 

Toolbox
Toolbox, bottom

Website Design Copyright © 2009-2011
Website Sitemap - News Archive