Loading Collection of IFRAMES

pallone · July 20th, 2006, 08:06 AM

Hi,

I am using IFRAMES to set the layout of my site. The top page called front.htm holds two iframes:

<iframe id="navigationLeft" scrolling="no" src="nav.htm"></iframe>
<iframe id="contentRight" src="main.htm" scrolling="no"></iframe>

The navigationLeft iframe has some links that when pressed should change the content of the iframe on the right (contentright).

This is how the contentRight IFRAME is set

<iframe id="fr0" src="" width="100%" frameborder="0" />

When I click on a link in the navigation iframe, I would like to load a collection of iframes in the contentRight iframe and display only the 0th iframe. Les's say we have 3 iframes in the collection, then only the first one would be displayed. The others would be hidden and then when another link was clicked, one of the iframes that is hidden would display depending on the index passed.

Is it possible to do that in JavaScript? Can someone help me with some sample code or tell me the name of a book I can buy that shows how to do that ?

Cheers

CP

Dj Kat · July 20th, 2006, 09:46 AM

There is plenty of information on the web how to do this with javascript.

I just have a question. Is there any reason why you use Iframes for this? It seems to me that you don't really need iframes for you problem.

From the way it looks I would say you are trying to create a dynamic website without the use of serverside programming such as ASP PHP or JSP.
__________________________________________________ ________
This is my junk I'm gona eat it

pallone · July 20th, 2006, 04:03 PM

Hi Dj Kat,

Thanks to your reply.

No, I am using a server side language (c#) and pages with .aspx extension. I just thought it was simpler to explain my problem with .htm.

I have tried to search online for tutorials on that but all the sites I found were only shoing how to use basic iframes stuff. I would appreciate if you could send me the url.

Cheers,

CP

Dj Kat · July 22nd, 2006, 11:57 AM

I would do it serverside and without javascript. Here is a asp solution in vb it souldn't be to hard to convert this to C#. Also don't use iframes when you don't need them this example is without iframes but with layers.

Css file to create your layout without Iframes

Code:

/* CSS Document */
body{
    text-align:center;
    background-color:#CCCCCC;
}
#container{
    background-color:green;
    position: relative;
    margin: 0 auto;
    width: 780px;
    text-align:left;
    /*Firefox/IE fix*/
    margin-top:-21px !important;
    margin-top:-15px;
}
#banner{
    height:80px;
    width:780px;
    background-color:navy;
    clear:left;

}
#navigation{
    float:left;
    width:170px;
    height:500px;
    background-color:green;
    margin-bottom:0px;
    padding-bottom:0px;
    padding-left:5px;
    padding-top:10px;
    font-size:16px;
}
#content{
    background-color:white;
    height:500px;
    width:600px !important;
    width:610px;
    float:left;

    padding-left:5px;
    padding-top:10px;
    margin-bottom:0px;
    padding-bottom:0px;
    margin-top:0px;
}
#footer{
    clear:left;
    height:50px;
    width:780px;
    background-color:yellow;
    margin-top:-22px !important;
    margin-top:-19px;
}

the asp file this you can convert to aspx I used a case to select a external file if your websites becomes to big you should use a database. The include is selected with the variable in the url id

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<div id="container">
    <div id="banner">
        <h1>Header</h1>
      </div>

    <div id="navigation">
        <a href="index.asp">home</a><br />
        <a href="index.asp?id=1">links</a><br />
        <a href="index.asp?id=2">etc</a><br />
        <a href="index.asp?id=3">etc</a><br />
    </div>

    <div id="content">
        <%

        select case Request.QueryString("id")
         case 1
           %><%
         case 2
           %><%
         case 3
           %><%
         case Else'Default falue
           %><%
        end select
        %>
    </div>
     <div id="footer"><h1>Footer</h1></div>
</div>

</body>
</html>

You only need to create your include files this something like this:
default.inc

Code:

<p>Default page</p>

__________________________________________________ ________
This is my junk I'm gona eat it

pallone · July 23rd, 2006, 03:38 PM

Hi Dj Kat,

Many thanks for your reply and sample code. I will have a look at the code you sent in detail. But the reason why I need to use iframes is because I do not want the pages to refresh after I click on the navigation links on the left. So suppose I have these links in their groups:

Project
  Link1
  Link2
  Link3
  Link4
Audit
  Link1
  Link2
School
  Link1
  Link2

When I ckick on Audit/Link1 I would like to load all the pages that belong to that group but only display Link1 and hide the other pages which will be ready to be displayed if another link in that group is choosen. Then if I click on School/Link2, I would like to load all pages related to the School group but only show the Link2 page and so on.

That is why I need to use iframes.

Any ideas ??

Cheers

Dj Kat · July 23rd, 2006, 09:17 PM

Hi,

I would still recommend not using Iframes. If you don't want to whole page to refresh study examples of Ajax this can refresh only a part of the HTML.

__________________________________________________ ________
This is my junk I'm gona eat it

pallone · July 24th, 2006, 08:37 AM

Hi,

I am already using Ajax as well. It is jus a matter of figuring out how to donload a collection of iframes when clicking a single link!!

Dj Kat · July 25th, 2006, 12:59 PM

have you tried looking for javascript DOM. This is the way to manipulate data in your HTML

__________________________________________________ ________
This is my junk I'm gona eat it.
In the example of the url you can find how Ajax is used how to refresh a part of the HTML.
Ajax example

panacea · July 25th, 2006, 07:53 PM

Pallone,

When a user clicks on a link, you have to run a Javascript function to change the iframe locations. Let me assume that your iframe's have id's defined like this:

<iframe id="if1" src="moo.html">
<iframe id="if2" src="goo.html">
<iframe id="if3" src="foo.html">
<a href="javascript:switchFrames(); return false">Switch Frames</a>

Then just have some script to implement switchFrames:

function switchFrames()
{
  document.getElementById("if1").src = "moo2.html";
  document.getElementById("if2").src = "goo2.html";
  document.getElementById("if3").src = "foo2.html";
}

There's a lot of good details here: http://www.quirksmode.org/js/iframe.html

Jon Emerson
http://www.jonemerson.net/

pallone · August 7th, 2006, 01:49 PM

Hi Jon,

I missed your post. Thanks for you reply. I still have not been able to achieve what I need but I will try your example.

Cheers

CP