Announcement

**Old Pedant** · Aug 28, 2011, 01:58 PM

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?

**pandoradora** · Aug 29, 2011, 02:39 AM

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.

**Old Pedant** · Aug 29, 2011, 04:28 AM

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.

**pandoradora** · Aug 30, 2011, 02:25 AM

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

**Old Pedant** · Aug 30, 2011, 03:16 PM

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.

**pandoradora** · Aug 30, 2011, 03:43 PM

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

Announcement

Making div tabs from iframe appear in parent window.

Making div tabs from iframe appear in parent window.

Comment

Comment

Comment

Comment

Comment

Comment