...

View Full Version : Making div tabs from iframe appear in parent window.



pandoradora
08-28-2011, 05:02 PM
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/dynamicindex8/dhtmlwindow/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!

Old Pedant
08-28-2011, 06: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
08-29-2011, 07: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
08-29-2011, 09: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
08-30-2011, 07:25 AM
That sounds like a great idea. I would love to see the code, if it's not too much trouble.

Old Pedant
08-30-2011, 08:16 PM
Here's an old sample of mine.


<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
08-30-2011, 08:43 PM
This is terrific. Definitely a huge help! Maybe now I can join the 21st century. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum