Use javascript to Show hidden Divs after delay

vickero007 · Mar 3, 2005

I would like to use Javascript to show hidden divs after a delay (2 seconds). So, I have 5 divs, all hidden when the page loads.

I would like to have each Div, 1-5, one after the other, change from hidden to visible with a 2 second delay after each one.

I've tried this with a for loop to eat up time, and with a timer. It will execute a window.alert but it won't execute the line to change the visibility of the Div.

Any idea why this isn't working?

Thanks,

Volkoff007

trollacious · Mar 3, 2005

Where's your code? No code, no idea why it's not working.

Lee

BillyRayPreachersSon · Mar 4, 2005

Using a loop to delay a script in JavaScript would give the effect that you're seeing (the alerts work, but the DIVs do not display), as your CPU time will most likely be at 100% due to the very, very tight loop.

This is a known and unavoidable issue with JavaScript, in that screen updates (alerts aside) will not happen within a tight loop such as the one you describe.

Using a timer (setTimeout, setInterval) would be your only way forward, I'd say.

This works for me:

Code:

<html>
<head>
	<script type="text/javascript">
	<!--
		function showDiv(divNum) {
			document.getElementById('div' + divNum).style.display = 'block';
			divNum++;
			if (divNum < 6) setTimeout('showDiv(' + divNum + ');', 2000);
		}
	//-->
	</script>
</head>
<body onload="setTimeout('showDiv(1);', 2000);">
	<div id="div1" style="display:none;">Div 1</div>
	<div id="div2" style="display:none;">Div 2</div>
	<div id="div3" style="display:none;">Div 3</div>
	<div id="div4" style="display:none;">Div 4</div>
	<div id="div5" style="display:none;">Div 5</div>
</body>
</html>

As Lee points out, however, fixing the exact code you have wouldn't be possible unless you post it. We're not psychic coders here ;o)

Hope this helps,
Dan

The answers you get are only as good as the information you give!

vickero007 · Mar 4, 2005

Thanks for the help. The problem was the onLoad (which I was using before) wouldn't work with my existing onLoad Preloader. Since I'm using ASP I just made it so it doesn't preload when that page loads, it calls setTimeout instead.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Use javascript to Show hidden Divs after delay

vickero007

IS-IT--Management

trollacious

Programmer

BillyRayPreachersSon

Programmer

vickero007

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor