Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dynamically change & show/hide iframes

    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.

  • #2
    New Coder
    Join Date
    Sep 2011
    Location
    England
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It would be much easier to offer assistance if we could see what you have already please.

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your probably asking for lightbox ?
    Code:
    http://lokeshdhakar.com/projects/lightbox2/

  • #4
    mjy
    mjy is offline
    New Coder
    Join Date
    Jan 2012
    Location
    United States
    Posts
    28
    Thanks
    0
    Thanked 6 Times in 6 Posts
    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.)

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's an example of what I get:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <title>iframe Test</title>
    <style type="text/css">
    #ContentWrapper {
      width:736px;
      height:610px;
      margin-left:0px;
      margin-top:20px;
    }
    </style>
    <script type="text/javascript">
        function OpenWindow() {
            var TestName = document.getElementById("TestFrame")
        TestName.style.display='block'
    }
    </script>
    
    </head>
    <body>
    <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">
    	    <tr>
    	 	    <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>
    	 	</tr>
    	 	<tr>
    	 	    <td height="126">&nbsp;</td>
    	 		<td><img src="images/garlicbulbs.jpg" alt="" width="138" height="92" border="0" /></td>
    	 		<td>&nbsp;</td>
                <td></td>
    	 	</tr>
        </table>
    </div>
    </body>
    </html>
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •