Show 1 out of 3 iFrames by clicking corresponding button (3 iFrames, 3 buttons)

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • lauranoel
    New Member
    • Jan 2010
    • 2
    #1

    Show 1 out of 3 iFrames by clicking corresponding button (3 iFrames, 3 buttons)

    I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o

    Here's my code:

    Code:
        <div id="tabs">  
    <div id="overview">  
    <a href="#wrapper">Overviews</a>  
    </div>  
    <div id="gallery">  
    <a href="#wrapper2">Gallery</a>  
    </div>  
    </span>  
    <div id="reviews">  
    <a href="#wrapper3">Reviews</a>  
    </div>  
    </div>
    Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.

    How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?

    Thank you so much in advance!! :)

    P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
    Last edited by acoder; Jan 18 '10, 09:01 AM. Reason: Added [code] tags. Please use them.
    Tags: css, html, iframe, javascript
    • Atli
      Recognized Expert Expert
      • Nov 2006
      • 5062
      #2
      Hey.

      I would suggest one of two methods, to swap out the contents of an element.

      #1 A single <iframe> who's contents are changes by <a> tags.
      For example:
      [code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <head>
      <title>Test</title>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      </head>
      <body>
      <div>
      <div>
      <a target="searchF rame" href="page1.htm l">First</a> |
      <a target="searchF rame" href="page2.htm l">Second</a> |
      <a target="searchF rame" href="page3.htm l">Third</a>
      </div>
      <hr>
      <iframe name="searchFra me" width="550" height="400"></iframe>
      </div>
      </body>
      </html>[/code]
      By specifying the target attribute of the <a> tag, it will open the link in the targeted <iframe>, rather than the browser window itself.

      #2 Swapping the contents of a <div> using AJAX.
      This is essentially the 2.0 version of the first suggestion. It uses more modern techniques, which give you more control over what happens, and give you a lot more options as to how the data is handled.

      However, it requires that JavaScript is enabled, and it requires a little more code.
      [code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <head>
      <title>Test</title>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
      function swapContent(tar getID, url) {
      var target = document.getEle mentById(target ID);

      var ajax = new XMLHttpRequest( );
      ajax.open('GET' , url, true);
      ajax.onreadysta techange = function() {
      if(ajax.readySt ate == 4) {
      target.innerHTM L = ajax.responseTe xt;
      }
      }
      ajax.send(null) ;
      }
      </script>
      </head>
      <body>
      <div>
      <div>
      <a href="javascrip t: void();" onclick="swapCo ntent('searchDi v', 'page1.html');" >First</a> |
      <a href="javascrip t: void();" onclick="swapCo ntent('searchDi v', 'page2.html');" >Second</a> |
      <a href="javascrip t: void();" onclick="swapCo ntent('searchDi v', 'page3.html');" >Third</a>
      </div>
      <hr>
      <div id="searchDiv" style="width: 550px; height: 400px; overflow: scroll;">Please select one...</div>
      </div>
      </body>
      </html>
      [/code]

        Comment

        • lauranoel
          New Member
          • Jan 2010
          • 2
          #3
          your 1st solution worked!! :) but i still have to click the 1st tab before it loads the frame. how do i set the 1st tab to be chosen as default upon loading the page? :) thanks so much again!! :)

            Comment

            • Atli
              Recognized Expert Expert
              • Nov 2006
              • 5062
              #4
              You can set the src attribute of the tag.

              [code=html]<iframe src="page1.html " ... >[/code]

              P.S.
              You can use that page I linked: w3schools.com, to check out how various elements work.

                Comment

                Previous template Next
                Working...