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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Linking 2 Iframes with 1 link?

    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

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You will need javascript I think...

    Try something like this -

    Javascript -

    Code:
    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!
    Last edited by mark87; 05-25-2005 at 10:22 PM.

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's what I showed you -

    Here's a test page for example -

    Code:
    <!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>
    Last edited by mark87; 05-25-2005 at 10:20 PM.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You don't need to use eval, but the best thing would be to do this
    Code:
    <!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.

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah yea, fair enuff.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Other possible solution:

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

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #10
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by AOD1174; 05-28-2005 at 04:24 PM.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You see all you had to do was explain it that way in the first place. This should work.
    Code:
    <!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.

  • #12
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    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)

    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.



    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?


  •  

    Posting Permissions

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