Drop Down Menu modifying a iFrame [Archive]

Hailor

02-26-2007, 05:15 PM

Right, so i have been searching for this for ages and cant seem to find it anywhere
I can create links to modify a iFrame

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<SCRIPT language=javascript type="text/javascript">
var iFrameArray = ["iframe1","iframe2","iframe3"];
function showhideiframe(strIframeID){
hideAllIFrames();
document.getElementById(strIframeID).style.display = "block";
}

function hideAllIFrames(){
for(var i=0; i<iFrameArray.length; i++){
document.getElementById(iFrameArray[i]).style.display = "none";
}
}
</SCRIPT>
</head>

<body>
<div style="clear:both;">
<div>
<A HREF="" onClick="showhideiframe('iframe1'); return false;">iFrame1</a>
<A HREF="" onClick="showhideiframe('iframe2'); return false;">iFrame2</a>
<A HREF="" onClick="showhideiframe('iframe3'); return false;">iFrame3</a>
</div>
</div>

<div>
<div>

<iframe name="iframe1" id="iframe1" src="PAGE GOES HERE" frameborder="0" width="100%" height="100%" style="display:block" ></iframe>
<iframe name="iframe2" id="iframe2" src="PAGE GOES HERE" frameborder="0" width="100%" height="100%" style="display:none" ></iframe>
<iframe name="iframe3" id="iframe3" src="PAGE GOES HERE" frameborder="0" width="100%" height="100%" style="display:none"></iframe>
</div>
</div>

</body>
</html>

But i dont really want to click on a link to change the iFrame... is it possible to change this to a Dropdown Menu?

Any help would be greatly appreciated

Thanks

ess

02-26-2007, 08:17 PM

You have a good solution there, though, I wouldn't load more than one IFrame. Basically, I would use one IFrame to load contents relevant to a link. In other words, the function you have created should change the source of the IFrame instead of modifying CSS properties.

Here are a couple of references you could use to achieve what I have explained above.
http://www.quirksmode.org/js/iframe.html
http://www.devarticles.com/c/a/JavaScript/Working-with-IFRAME-in-JavaScript/

Cheers,
Ess