Hi,
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)={
iframe.style.display="block";
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";}
}
//-->
</script>and here's the html
<body>
<div id="container">
<div id="top">
<img src="dhlogo.gif" id="logo"/>
<img src="tagline.jpg" id="logo"/>
</div>
<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>
<p>
<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>
<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>
</div>
</body>and here's frame.html :
<body>
<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>
</div>
</body>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,
Andrew