I'm a newbie and trying to use javascript to hide or display different divs within a single IFRAME. I can't seem to get the syntax right... the Iframe, ID "frame", has 5 div's which I want to show depending on what link someone clicks.

here's the js :

<script type="text/javascript">


var iframe = document.getElementByID("frame");
var info = iframe.contentDocument

function showFrame(page)={
if (page = 'weak') {
		info.getElementByID("weak").style.display = "block"; 
} else if (page = 'decap') {
		info.getElementByID("decap").style.display = "block"; 
} else if (page = 'fire') {
		info.getElementByID("fire").style.display = "block"; 
} else if (page = 'peppers') {
		info.getElementByID("peppers").style.display = "block"; 
} else if (age = 'bottles') {
			info.getElementByID("bottles").style.display = "block"; 
} else { 	iframe.style.display="hidden";}

and here's the html

<div id="container">
<div id="top">
<img src="dhlogo.gif" id="logo"/>
<img src="tagline.jpg" id="logo"/>

<div id="decap">
<a href="#" onclick="showFrame('weak')"><img src="weaksaucelogo.jpg" width="224" height="144" /></a>
<a href="#" onclick="showFrame('decap')"><img src="decapsaicinlogo.jpg" /></a>
<a href="#" onclick="showFrame('fire')"><img src="fireandice.jpg"  /></a>
<a href="#" onclick="showFrame('peppers')"><img src="pepperinfo.jpg"  /></a>
<a href="#" onclick="showFrame('bottles')"><img src="bottleinfo.jpg" /></a>

<img src="shake.jpg" />

<p><a href="mailto:decaphotsauce@gmail.com"><img src="email.jpg"></img></a></p></div>

<iframe width="400px" height="500px" scrolling="no" frameborder="0" src="frame.html" id="frame" name="frame" style="left:50%; margin-left: -200px; position:absolute; top:50%; margin-top:-250px; display: none;" ></iframe>

and here's frame.html :

<a href="javascipt:hideFrame()"><img src="bones2.gif" id="bones" style="border:none"/></a>
<div id="info">
<div name="weak" id="weak" style="display: hidden;"><img src="weakinfo.jpg" /></div>
<div name="decap" id="decap" style="display: hidden;"><img src="decapsininfo.jpg" /></div>
<div name="fire" id="fire" style="display: hidden;"><img src="fireinfo.jpg" /></div>
<div name="peppers" id="peppers" style="display: hidden;"><img src="pepperinfotext.jpg" /></div>
<div name="bottles" id="bottles" style="display: hidden;"><img src="recycle.jpg" /></div>

Perhaps there's a better way to approach this all together... as I said I'm a newb and any help would be greatly appreciated. Also, how do I close the iframe from within the iframe? I'm not sure that the javascript:Hideframe command is gonna work.

thanks again,



I was looking for something like this a few days ago:

take a look at this: link

I hope this helps ;)

By the way, as I searched net, more and more sites didn't recommend using Iframes altogether.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.