Web Analytics Made Easy -
StatCounter Making div tabs from iframe appear in parent window. - CodingForum


No announcement yet.

Making div tabs from iframe appear in parent window.

  • Filter
  • Time
  • Show
Clear All
new posts

  • Making div tabs from iframe appear in parent window.

    Hello all,

    From what I've seen there isn't really a solution to this problem, but I thought I'd try my luck.

    I'm trying to code a website that's built around an iframe (as in, the nav bar links to content which appears in a central iframe). Now, in one of my pages I've got links that are supposed to open a small text block when they're clicked.

    I've figured out how to do this using either divs or the DHTML window widget (http://www.dynamicdrive.com/dynamici...ndow/index.htm), but in both cases the tab appears inside the iframe, and it's pretty cramped. I want to position it relative to the parent window, not the iframe, but so far haven't been able to figure out how to do this.

    Does anyone have an idea?

  • #2
    Well, personally, I'd consider getting rid of the <iframe>.

    But it's really hard to envision your web page from just the description.

    Can't you show it to us, live? So we can see the problem for ourselves?
    Be yourself. No one else is as qualified.


    • #3
      Unfortunately the website isn't live (and I don't have the server details yet so I can't upload it and show you).

      I don't mind giving up the iframe (I only used it because I'm an html dinosaur- I haven't touched coding in over a decade, so I automatically went for something vaguely familiar). My only concern is that I'd like the static elements- the navigation, logo, etc. - not to reload every time users click a link. Will divs do that automatically? If not, is there a way to make sure that only the content will change?
      Thanks again.


      • #4
        The "trick" is to put the HTML for *ALL* the tabs into your ONE HTML page.

        Each tab content in a separate div.

        You position the <div>s so they are all on top of one another and then, as you click on the link (or whatever) you hide all of the divs but the one you want to show.

        Truly easy.

        Will show you sample code tomorrow; too late tonight.
        Be yourself. No one else is as qualified.


        • #5
          That sounds like a great idea. I would love to see the code, if it's not too much trouble.


          • #6
            Here's an old sample of mine.
            <style type="text/css">
            div#ALL { position: relative; width:80%; height: 400px; margin-top: 30px; }
            div.tabBody { position: absolute; top: 0px; left: 0px; 
                          width: 100%; height: 100%;
                          z-index: 1; 
                          background-color: yellow; border: solid brown 2px; 
                          padding: 20px; 
            div.tabHead { position: absolute; top: -20px; left: 10px; 
                          width: 100px; height: 22px;
                          z-index: 2;
                          text-align: center; 
                          background-color: lightyellow; border: solid brown 2px; border-bottom: none;
            <script type="text/javascript">
            function front(which)
                for ( var t = 1; t < 9999; ++t )
                    var dv = document.getElementById("TABBODY"+t);
                    if ( dv == null ) return;
                    dv.style.zIndex = t == which ? 5 : 1;
                    var tab = document.getElementById("TAB"+t);
                    tab.style.backgroundColor = t == which ? "yellow" : "lightyellow";
                    tab.style.zIndex = t == which ? 7 : 1;
            <body onload="front(1);">
            Stuff at the top of the page.
            <div id="ALL">
                <div id="TAB1" class="tabHead" onclick="front(1);">One</div>
                <div id="TAB2" class="tabHead" onclick="front(2);" style="left: 140px;">Two</div>
                <div id="TAB3" class="tabHead" onclick="front(3);" style="left: 260px;">Three</div>
                <div id="TABBODY1" class="tabBody">
                    This is body 1
                <div id="TABBODY2" class="tabBody">
                    2 2  second 2 2 
                <div id="TABBODY3" class="tabBody">
                    Third one
            You can add as many tabs/tab bodies as will fit. The JS code is self-adjusting for however many there are.
            Be yourself. No one else is as qualified.


            • #7
              This is terrific. Definitely a huge help! Maybe now I can join the 21st century.