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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 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?
    Thanks!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That sounds like a great idea. I would love to see the code, if it's not too much trouble.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    Here's an old sample of mine.
    Code:
    <html>
    <head>
    <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;
                }
    </style>
    <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;
        }
    }
    </script>
    <body onload="front(1);">
    Stuff at the top of the page.
    <br/><br/>
    <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>
        <div id="TABBODY2" class="tabBody">
            2 2  second 2 2 
        </div>
        <div id="TABBODY3" class="tabBody">
            Third one
        </div>
    </div>
    </body>
    
    </html>
    You can add as many tabs/tab bodies as will fit. The JS code is self-adjusting for however many there are.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    pandoradora (08-30-2011)

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is terrific. Definitely a huge help! Maybe now I can join the 21st century.


  •  

    Posting Permissions

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