...

View Full Version : Linking 2 Iframes with 1 link?



AOD1174
05-25-2005, 03:35 PM
ok, here is my problem. I am creating a website that I will be using 4 different IFrames in. 2 of the IFrames will always remain the same. The other 2 however will be used more ofton. What I am looking to do is work it so that when a link is clicked on the main page, it opens a new page in each of the 2 Iframes. So basicly 1 link opens up a page in 1 Iframe and then another page in the other Iframe.

Now I looked into doing this a few months ago, but came up with no results, so I figured I would try again. Last time I looked into this I believe I seen it could be done, but it had something to do with a java script. I am hoping that it can be done with normal HTML, but any solution will do.

Thanx

mark87
05-25-2005, 03:56 PM
You will need javascript I think...

Try something like this -

Javascript -


function changeLink(link1,link2) {
eval("parent.frame1.location='"+link1+"'");
eval("parent.frame2.location='"+link2+"'");
}

Then when you link you can specify the two links eg -

href="javascript:changeLink('http://www.google.com', 'http://www.yahoo.com')"

Hope that works, my Javascript is a bit rusty!

AOD1174
05-25-2005, 08:47 PM
I think I remember seeing something like that before, but isn't that for 1 link?

You already know the concept of what I'm trying to do, so I don't have to say that again, but heres the thing. The site I am trying to do this for is a site for my cousins band. I want to use the 2 iframes more for his music section then anything else. So heres how it will go. There will be a list of his songs, you see one you like and you click that one (link). (for my exampe I will use the song "when it's time").

So I click the "when it's time" link, now in the Main Iframe the lyrics will open. In the 2nd iframe (right had corner) a page will load with the MP3 embeded in it for the song.

So what I want to know is can that be customized so that (for example) 15 different links can open up 2 different pages per link?

mark87
05-25-2005, 10:01 PM
That's what I showed you -

Here's a test page for example -



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<script>
function changeLink(link1,link2) {
eval("parent.frame1.location='"+link1+"'");
eval("parent.frame2.location='"+link2+"'");
}
</script>

</head>

<body>
<a href="javascript:changeLink('http://www.google.com', 'http://www.yahoo.com')">Change Links</a> <br>

<iframe name="frame1" width="200" height="200" src="">
<iframe name="frame2" width="200" height="200" src="">

</body>

</html>

_Aerospace_Eng_
05-25-2005, 11:02 PM
You don't need to use eval, but the best thing would be to do this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<script>
function changeLink(link) {
parent.frame2.location=link;
}
</script>

</head>

<body>
<a href="blah.html" target="frame1" onclick="changeLink('blah2.html')">Change Links</a>
<a href="blah3.html" target="frame1" onclick="changeLink('blah4.html')">Change Links Again</a> <br>

<iframe name="frame1" width="200" height="200" src="">
<iframe name="frame2" width="200" height="200" src="">

</body>

</html>
Use a normal link and use the onclick this way if javascript is disabled, they will see as least one of page.

mark87
05-26-2005, 12:21 AM
I didn't think I needed the eval but my Javascript skills lack somewhat! He wants to change 2 frames at the same times though?

_Aerospace_Eng_
05-26-2005, 01:57 AM
Right, the script I made will target one frame, change that link, and the onclick will change the location of the other frame, so all in all how many frame are change? Two frames are change.

mark87
05-26-2005, 11:09 AM
Ah yea, fair enuff.

glenngv
05-26-2005, 01:26 PM
Other possible solution:

<a href="blah.html" target="frame1" onclick="window.open('blah2.html', 'frame2')">Change Links</a>

AOD1174
05-28-2005, 04:17 PM
Ok, I tried the first suggestion given but it wasnt the effect I wanted. I looked at the 2nd suggestion and they seem almost the same.

Here the reason it wasn't the effect I wanted, I'll explain it in full detail.

As I said i have 1 main frame with 4 Iframes embedded in it. The site is for a band. On the Main page there are links, one of the links is "Music/video". here is a list of the names of the Iframes so it makes it easier to explain

Right side Iframe "News"
Lower Mid Iframe "Main"
Upper right Iframe "Tour"
Lower Right Iframe "Intro"

Ok so someone clicks the "Music/Video" link on the main page. The new page opens in the "News" Iframe. On this new page is a list of the song titles. Now lets say you click "Row My Boat". The lyrics for "Row My boat" will open in the "Main" Iframe and the actual song (MP3) will open in the "Intro" Iframe.

Whats really happening? When you click the link, 2 new Iframes are being created below the link it's self, in the list of song titles. So basicly 2 new Iframes are being created in the orginal Iframe and now changes the 2 iframes I created for these events.

If this doesn't make any sense I will try and explain it better, maybe with pictures.

It seems the code could work, if I could target the 2 Iframes I already have to change instead of it creating 2 new Iframes. Basicly

Main Page Link --> Changes page in Iframe "News"
News Iframe Link ---> Changes page in Iframe "Main" and Iframe "Intro"

I want to thank you for atleast trying to help me.

_Aerospace_Eng_
05-28-2005, 05:18 PM
You see all you had to do was explain it that way in the first place. This should work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<script>
function changeLink(link1,link2,link3,link4) {
parent.frame2.iframe1.location=link1;
parent.frame2.iframe2.location=link2;
parent.frame2.iframe3.location=link3;
parent.frame2.iframe4.location=link4;
}
</script>

</head>

<body>
<a href="blah1.html" target="frame2" onclick="changeLink(this.href,'blah2.html','blah3.html','blah4.html');return false">Change Links</a>

</body>

</html>
Attached is an example with the files in a frameset.

AOD1174
05-28-2005, 07:45 PM
I think I'm just not getting it.. I'm not saying the code doesn't work, but it's not working how I want. I think the reason is cause I'm trying to change 2 Iframes from another Iframe. The link will not be on the main page, it will be inside of an iframe.

Can that be the problem? cause when the link is clicked it still opens up iframes inside of the other Iframe..

Sorry in advance if these images are too large. I just want to get as much detail as I can


Ok, in the image below you will see the main layout of the page. I have it broken down into 1 page with 4 Iframes.
http://img56.echo.cx/img56/3108/layout15wt.jpg
Next you will see where the links are located. These will be on the main page and not inside of an Iframe. When the the Music/Video link is clicked. I want a page to open in the "News" Iframe (This I already have)
http://img56.echo.cx/img56/4656/layout25qh.jpg
Now heres my problem. In the new page that opens in the "News" Iframe, there will be a list of song titles (19 in all... So far). When 1 link is clicked it should open a new page inside the "Main" Iframe and another new page inside the "Intro" Iframe.
http://img56.echo.cx/img56/5629/layout31xf.jpg


Right now it's opening 2 new pages inside the News Iframe. and thats where my problem is. Maybe I'm just doing it wrong?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum