|
Subject:
|
Loading Collection of IFRAMES
|
|
Posted By:
|
pallone
|
Post Date:
|
7/20/2006 8:06:40 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
|
|
Reply By:
|
Dj Kat
|
Reply Date:
|
7/20/2006 9:46:48 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
|
|
Reply By:
|
pallone
|
Reply Date:
|
7/20/2006 4:03:41 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
|
|
Reply By:
|
Dj Kat
|
Reply Date:
|
7/22/2006 11:57:15 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
/* 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
<!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"><!-- navigation links-->
<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"><!--put all the content here-->
<%
select case Request.QueryString("id")
case 1
%><!--#include file="content1.inc"--><%
case 2
%><!--#include file="content2.inc"--><%
case 3
%><!--#include file="content3.inc"--><%
case Else'Default falue
%><!--#include file="default.inc"--><%
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
<p>Default page</p>
__________________________________________________________
This is my junk I'm gona eat it
|
|
Reply By:
|
pallone
|
Reply Date:
|
7/23/2006 3:38:20 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
|
|
Reply By:
|
Dj Kat
|
Reply Date:
|
7/23/2006 9:17:43 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
|
|
Reply By:
|
pallone
|
Reply Date:
|
7/24/2006 8:37:21 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!!
|
|
Reply By:
|
Dj Kat
|
Reply Date:
|
7/25/2006 12:59:49 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
|
|
Reply By:
|
panacea
|
Reply Date:
|
7/25/2006 7:53:23 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/
|
|
Reply By:
|
pallone
|
Reply Date:
|
8/7/2006 1:49:12 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
|
