View Full Version : dynamically change & show/hide iframes

Jan 21st, 2012, 12:17 AM
I want to be able to display a table of images, all the same size, click on any one and show a corresponding htm pages in an iframe, click outside the ifram or on it to close it; click on another image and on and on...
So far, I am able to hide the initial iframe and/or display it inline but am unable to show it above the table that holds the images. It is not difficult to do this using screen-captured images of the htm pages but I am looking for a dynamic way of doing this either with javascript or php or just plain html. The htm pages contain a recipe with an photo and text in a <table>. If needed, I could whip up a small demo. Any help would be much appreciated.

Dom Mv
Jan 21st, 2012, 12:26 AM
It would be much easier to offer assistance if we could see what you have already please.

Jan 21st, 2012, 12:45 AM
Your probably asking for lightbox ?


Jan 21st, 2012, 02:13 AM
I'm not sure exactly what your requirements are, but a JavaScript package that I use called Highslide JS (from http://highslide.com) does what I think you want to do. You can create nice looking popup boxes that contain either a graphic or an iframe displaying an HTML file. (I have no affiliation with Highslide, but have had good luck with it.)

Jan 21st, 2012, 04:49 AM
I'll do the demo tomorrow.
I just had a flash = ideally, I should be able to create a number of htm files which then would be referenced in the same number of iframes stacked and hidden, all the same dimensions; then they would be opened and closed by clicks on an href to open; on the iframe or outside it to close(hide) them.
I'll look at highslide but there is also jquery and jquery.tools that might work. I don't know how in either.
One interesting problem: Firefox doesn't like z-index so it doesnt show stacking. I think there is a workaround.

Jan 21st, 2012, 08:32 PM
Here's an example of what I get:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>iframe Test</title>
<style type="text/css">
#ContentWrapper {
<script type="text/javascript">
function OpenWindow() {
var TestName = document.getElementById("TestFrame")

<div id="ContentWrapper" style="border:none">
<iframe id="TestFrame" src="some_recipe.htm" height="520" width="728" scrolling="no" marginwidth="0" marginheight="0" frameborder="1" style="float:left; left: 0px; top: 10px; display:none ; z-index: -1; "></iframe>
<table id="SubSectionsGrid" cellpadding="0" cellspacing="0" border="1">
<td width="184" height="126"><img src="images/cheesecornmuffin.jpg" alt="" width="180" height="122" border="0" /></td>
<td width="184">
<a href="#" onclick="OpenWindow()">Lamb Burger with Pine Nuts, Olives and Black Radish</a> </td>
<td width="184"><img src="images/raspberryspoom.jpg" alt="" width="180" height="122" border="0" rel="#a2" /></td>
<td width="184">
<a href="#" onclick="OpenWindow()">Raspberry Spoom</a> </td>
<td height="126">&nbsp;</td>
<td><img src="images/garlicbulbs.jpg" alt="" width="138" height="92" border="0" /></td>

I can't get the iframe to cover the table.
And then, how to close the iframe, change the content by clicking on an href for another recipe, open and close that, and so on and on...