how do i make a tabbed iframe which can change its height automatically and make height equal to the content inside it.
I have never used iframe before this.
i dont want scrollers. i want it to call the size of the content inside it.
i have tried some scripts but nuthing works. i need changing of the width & height dynamically.
any help would be really appreciated.
Thanks!!
my iframe code which is not working is:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabs Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/******************************************************************************
* Styles for the tabbed displays. *
******************************************************************************/
/*-----------------------------------------------------------------------------
Note: The border-radius property is a proposed feature for CSS3 which creates
rounded corners. Mozilla/Netscape browsers currently support this
feature via the proprietary -moz-border-radius property. Both are
defined here. Browsers that support neither should simply ignore them.
-----------------------------------------------------------------------------*/
div.tabBox {
}
div.tabArea {
font-size: 80%;
font-weight: bold;
padding: 0px 0px 3px 0px;
}
a.tab {
background-color: #d0b0ff;
border: 2px solid #000000;
border-bottom-width: 0px;
border-color: #f0d0ff #b090e0 #b090e0 #f0d0ff;
-moz-border-radius: .75em .75em 0em 0em;
border-radius-topleft: .75em;
border-radius-topright: .75em;
padding: 2px 1em 2px 1em;
position: relative;
text-decoration: none;
top: 3px;
z-index: 100;
}
a.tab, a.tab:visited {
color: #8060b0;
}
a.tab:hover {
background-color: #a080d0;
border-color: #c0a0f0 #8060b0 #8060b0 #c0a0f0;
color: #ffe0ff;
}
a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
background-color: #9070c0;
border-color: #b090e0 #7050a0 #7050a0 #b090e0;
color: #ffe0ff;
}
a.tab.activeTab {
padding-bottom: 4px;
top: 1px;
z-index: 102;
}
div.tabMain {
background-color: #9070c0;
border: 2px solid #000000;
border-color: #b090e0 #7050a0 #7050a0 #b090e0;
-moz-border-radius: 0em .5em .5em 0em;
border-radius-topright: .5em;
border-radius-bottomright: .5em;
padding: .5em;
position: relative;
z-index: 101;
}
div.tabIframeWrapper {
width: 100%;
}
iframe.tabContent {
background-color: #9070c0;
border: 1px solid #000000;
border-color: #7050a0 #b090e0 #b090e0 #7050a0;
width: 100%;
height: 100%;
}
/******************************************************************************
* Additional styles. *
******************************************************************************/
h4#title {
background-color: #503080;
border: 1px solid #000000;
border-color: #7050a0 #b090e0 #b090e0 #7050a0;
color: #d0b0ff;
font-weight: bold;
margin-top: 0em;
margin-bottom: .5em;
padding: 2px .5em 2px .5em;
}
</style>
<script type="text/javascript">//<![CDATA[
function synchTab(frameName) {
var elList, i;
// Exit if no frame name was given.
if (frameName == null)
return;
// Check all links.
elList = document.getElementsByTagName("A");
for (i = 0; i < elList.length; i++)
// Check if the link's target matches the frame being loaded.
if (elList[i].target == frameName) {
// If the link's URL matches the page being loaded, activate it.
// Otherwise, make sure the tab is deactivated.
if (elList[i].href == window.frames[frameName].location.href) {
elList[i].className += " activeTab";
elList[i].blur();
}
else
removeName(elList[i], "activeTab");
}
}
function removeName(el, name) {
var i, curList, newList;
if (el.className == null)
return;
// Remove the given class name from the element's className property.
newList = new Array();
curList = el.className.split(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}
//]]></script>
</head>
<body>
<div class="tabBox" style="clear:both;">
<div class="tabArea">
<a class="tab" href="http://www.yahoo.com" target="tabIframe2">Yahoo</a>
<a class="tab" href="http://www.google.com" target="tabIframe2">Google</a>
<a class="tab" href="http://www.yahoo.com" target="tabIframe2">Yahoo</a>
<a class="tab" href="http://www.google.com" target="tabIframe2">Google</a>
<a class="tab" href="http://www.yahoo.com" target="tabIframe2">Yahoo</a>
</div>
<div class="tabMain">
<div class="tabIframeWrapper"><iframe class="tabContent" name="tabIframe2" src="http://www.google.com"
marginheight="8" marginwidth="8" frameborder="0"></iframe></div>
</div>
</div>
</body>
</html>