Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: How to change 2 iframes with one click in a 3rd frame?

  1. #1
    Join Date
    Feb 2005
    Posts
    71
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default How to change 2 iframes with one click in a 3rd frame?

    Is it possible to change 2 different iframes with one click in a 3rd iframe? I realise that it would be possible to put all the iframes into one larger frame, but I was hoping for a neater solution.

    Any ideas?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I haven't actually tested this, but something like the below inside the 3rd iframe should work:

    Code:
    <script type="text/javascript">
    function changetwo(url1, url2){
    parent.document.getElementById("iframe1").src=url1
    parent.document.getElementById("iframe2").src=url2
    }
    </script>
    whereby "iframe1" is the ID of the 1st iframe, and "iframe2", of the 2nd iframe. You would call the above function using:

    Code:
    <a href="#" onClick="changetwo('http://google.com', 'http://news.com')">Change two iframes</a>

  3. #3
    Join Date
    Sep 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    I've links in one iFrame that change up to 3 other iFrames;

    http://arctic.ithium.net/

    View-source the menu iFrame to get an idea on coding.

  4. #4
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default code from ddadmin

    Hello Forum members,
    After searching "one click two iframes" in Google, I arrived at this forum. I've experimented for a few hours with ddamin's javascript, and have had 50% success. I'll do my best to describe the design layout, and how I am attempting to use ddadmin's code:

    __________________
    --------
    image
    --------

    ------------
    iframe
    (id=frame1)
    QT Movie
    ------------

    ------------
    iframe
    (id=frame2)
    Text
    ------------

    __________________

    I am attempting to click on the image to open a QuickTime Movie in frame1 with text information about various elements of the movie displayed in frame2 (directly under the movie).

    After inserting the javascript in the appropriate table cell, then adding the URLs, when I click on the image, both frame1 and frame2 are activated. So I know the script is valid for this instance. But frame1 (the movie) displays a "page not found", although the link is valid.

    There may be something about the URL1 that prevents the movie from opening in frame1. URL1 has "URLs within URLs". Here's the code, as I have modified it for the page:

    <script type="text/javascript">
    function changetwo(url1, url2){
    parent.document.getElementById("frame1").src=url1
    parent.document.getElementById("frame2").src=url2
    }
    </script>
    <a href="#" onClick="changetwo('CLIPS/DAN-NOVEIL_GRAYSON.mov pluginspage=http://www.apple.com/quicktime/download/ autoplay=true bgcolor=000000 width=180 height=150','view3.html')">
    <img src="images/small/DAN_NO_VEIL.gif" width="110" height="83" border="0"></a>

    URL2 (view3.html) displays perfectly. URL1 (the QT Movie) returns, "The page cannot be displayed".

    Do I need to insert extra single and / double quotes somewhere within the first code?

    If not, can you see the problem and offer a fix?

    Nice, clean script.

    Best wishes,
    The-Muse
    Last edited by the-muse; 07-01-2005 at 06:59 AM. Reason: Forgot to subscribe...

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It is most likely the compound url. I have found that .mov files display fine all by themselves in iframes, without the plug-in reference. If, for formatting reasons you are wedded to the plugin reference, use it as it normally would be used on a page that will then be displayed in the iframe*. However, I would use a different approach to begin with instead of getElementById, src= and id's for the iframes, I would use:

    parent.frame1.location.replace(url1)

    or

    parent.frame1.location.href=url1

    Where frame1 is the name of the iframe. Besides being a little more compact, This gives us the choice of either adding to (2nd example) or leaving the history stack unchanged (1st example).

    *see: http://www.w3schools.com/media/media_quicktime.asp
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 2 frames with one link

    Hello jscheuer1,
    I appreciate your suggestion.

    It is most likely the compound url. I have found that .mov files display fine all by themselves in iframes, without the plug-in reference. If, for formatting reasons you are wedded to the plugin reference, use it as it normally would be used on a page that will then be displayed in the iframe*.
    You are correct with your assumption. But I had to remove all the coding, other than the actual URL. This is what it looked like after the modification:

    <script type="text/javascript">
    function changetwo(url1, url2){
    parent.document.getElementById("frame1").src=url1
    parent.document.getElementById("frame2").src=url2
    }
    </script>
    <a href="#" onClick="changetwo('CLIPS/DAN-NOVEIL_GRAYSON.mov ','view3.html')">
    <img src="images/small/DAN_NO_VEIL.gif" width="110" height="83" border="0"></a>

    The results are somewhat quirky. I tested it in IE6 and Netscape6 on both Win98 and WinXP at two different locations. The problem during one of the tests was that the iFrame containing the QuickTime movie opened a blank page, and the movie wouldn't load until I refreshed the page.

    I would prefer learning how to properly insert the html code within the javascript string. I tried every combination I could imagine using single quotes, double quotes, escapes, etc. None of them worked.

    Unfortunately, this puzzle has me hooked, and even if there were an alternative which incorporated a different method altogether, I still want to pursue the answer to this question so that I might learn a bit more about javascript.

    The exact question would be: What's wrong with the following code?:

    <a href="#" onClick="changetwo('CLIPS/DAN-NOVEIL_GRAYSON.mov pluginspage=http://www.apple.com/quicktime/download/ autoplay=true bgcolor=000000 width=180 height=150','view3.html')">
    I've included the quoted example without any single quotes, double quotes or escapes. I can't help but feel there's a proper way to modify the above string to allow the inclusion of the html code.

    Until someone knows for sure that what I'm asking can't be done, I'll stay with this objective. Even though the QuickTime movie does load with the absence of the plugin reference, it doesn't seem to do so with consistent reliability. Every place I've researched (including your w3schools reference - thank you) has been adamant about keeping the plugin reference as part of the code.

    Most gratefully,
    The-Muse

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    First of all, as I am not very up on quicktime, my question would be, does this work:
    HTML Code:
    <a href="CLIPS/DAN-NOVEIL_GRAYSON.mov pluginspage=http://www.apple.com/quicktime/download/ autoplay=true bgcolor=000000 width=180 height=150" target="frame1">
    My tests say no. If it will not work as a regular link, it certainly will not work as javascript. Part of the problem is that you are trying to pass more than just the src attribute to the iframe. Either pass each parameter separately (which probably will still have problems in some browsers) or have them already assembled on a page and launch that page into the iframe (recommended).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello jscheuer1,

    ... or have them already assembled on a page and launch that page into the iframe (recommended).
    This recommendation worked like a charm. I am most grateful.

    Best wishes,
    The-Muse

  9. #9
    Join Date
    May 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I am having some trouble:

    I have two iframes on a webpage, one being a header with graphics and the other being content (tables). When I click a link I would like both the iframes to change respectively. How would I setup that script to do so because I am having a bit of trouble with it! Thanks all!

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Schwiz View Post
    I am having some trouble:

    I have two iframes on a webpage, one being a header with graphics and the other being content (tables). When I click a link I would like both the iframes to change respectively. How would I setup that script to do so because I am having a bit of trouble with it! Thanks all!
    This really isn't a very ideal situation because, if javascript is disabled, one or both of the iframes won't get their appointed content. Unless you make your page so that non-javascript enabled users would get to see two links (one for each of the two actions) for every one that the javascript enabled users see, that is.

    I can tell you how to have this work with javascript though. Say you have two iframes. Name them iframeone and iframetwo:

    <iframe name="iframeone" . . .

    and:

    <iframe name="iframetwo" . . .

    Then you could have a link:

    Code:
    <a href="some.htm" target="iframeone" 
    onclick="window.frames['iframetwo'].location.href='some_other.htm';return true;"
    >Whatever</a>
    This would put some.htm in iframeone and some_other.htm in iframetwo. But if javascript were disabled, only the first of these two things would happen. So you could have a noscript tag after your link (its contents would only be seen by non-javascript users):

    Code:
    <noscript><a href="some_other.htm" target="iframetwo">Whatever</a></noscript>
    And it would if clicked take care of the part that the non-javascript user would otherwise miss out on.

    Now the text (represented in both of the above by the word 'Whatever') should ideally convey to the non-javascript user that he or she needs to click both links to get the desired effect.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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