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>

I am going under the assumption that you will have access to the code set as the src. If that is not the case disregard this message as it can't help you. I don't got the time to fire up your code in any meaningful way, but when I write something with iframes that have dynamic content in them I use the following 2 lines of code to size them appropriately. I usually put them at the bottom of the file that the iframe is displaying.

parent.document.getElementById('iframe1').style.height=document.body.scrollHeight+'px';
parent.document.getElementById('iframe1').style.width=document.body.scrollWidth+'px';

Last time I checked this code is compatible with FF and IE 6 and 7. If the scrollHeight/scrollWidth value does not work try the offsetHeight/offsetWidth value.

Thanx alot i know u dont have time to go thru my complete code but just wrote it for a reference.

i hope ur code will solve my problem.

thanx alot

another thing coz u have already used iframe. i hope it is compactible with all the browsers. coz i read it online sumwhere about its compactibility problem.

Thanx

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.