AJAX

Javascript and Iframe Help

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2009

Posts: 1

Reputation: A___F is an unknown quantity at this point

Solved Threads: 0

A___F

Offline

Newbie Poster

Javascript and Iframe Help

31 Days Ago

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 :

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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 :

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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

•

Join Date: Oct 2007

Posts: 37

Reputation: wonderland is an unknown quantity at this point

Solved Threads: 0

wonderland wonderland is offline

Offline

Light Poster

30 Days Ago

Hi,

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.

Last edited by wonderland; 30 Days Ago at 10:23 am.

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes