Okay, i just want to get this out of the way. I do know that this subject has been tackled a couple times and I'm not cutting to the end without reading what has been already written. I can't seem to find the explanation that i'm looking for and a lot of the codes out there didn't seem to work for me. So, sorry if this is repeated and annoying, but I think it would be wonderful to find a good standard for this issue.

I like many others am trying to fit a forum script inside an iFrame to keep with my design and really make the page come together. Page loads no problem in the iFram, but then if you click a link on the forum, some pages will vary in height. I want to resize the iFrame dynamically to match the page and let my footer set within a table float.

So, I think I have two issues here. Letting the table resize dynamically and the iFrame also.

Anyone have help. I am putting here one of the codes that I tried. Seems to just add scrollbars or if I set for no scrolling, hides larger content pages.

All pages are on same domain, so that shouldn't be an issue. If i really have too much hassle with the iFram, I'd really like to at least get the table to resize dynamically for other pages.

I did find and article on resizing the frames by having to actually load a script in each page you are trying to load also, ugghhh, that could be a headache, but might be worth it in the end.

Help!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Johnny and the Producers -  Sloppy*Poppy*Punk*Rock</title>

<script language="JavaScript">
<!--
function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('the_iframe').contentWindow.
      document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('the_iframe').height=
      the_height;
}
//-->
</script>

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="producers-style.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#000000" text="#CCCCCC" link="#722B12" vlink="#722b12" alink="#FFFFFF" onload="MM_preloadImages('images/links_over.gif','images/home_over.gif','images/bio_over.gif','images/media_over.gif','images/studio_over.gif','images/forum_over.gif','images/contact_over.gif')">
<table width="200" border="0" align="center">
  <tr>
    <td colspan="5"><table border="0" cellpadding="0" cellspacing="0" width="700">
      <!-- fwtable fwsrc="J and the P Landing Page.png" fwpage="Page 1" fwbase="J and the P Landing Page.jpg" fwstyle="Dreamweaver" fwdocid = "1688605713" fwnested="0" -->
      <tr>
        <td><img src="images/spacer.gif" width="58" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="58" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="26" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="52" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="26" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="60" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="26" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="66" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="35" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="69" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="22" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="70" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="16" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="58" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="58" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="15"><img name="JandthePLandingPage_r1_c1" src="images/index_r1_c1.jpg" width="700" height="131" border="0" id="JandthePLandingPage_r1_c1" alt="" /></td>
        <td><img src="images/spacer.gif" width="1" height="131" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="13"><img name="JandthePLandingPage_r2_c1" src="images/index_r2_c1.jpg" width="584" height="1" border="0" id="JandthePLandingPage_r2_c1" alt="" /></td>
        <td rowspan="2"><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','images/links_over.gif',1);"><img name="Links" src="images/Links.jpg" width="58" height="30" border="0" id="Links" alt="" /></a></td>
        <td rowspan="4"><img name="JandthePLandingPage_r2_c15" src="images/index_r2_c15.jpg" width="58" height="35" border="0" id="JandthePLandingPage_r2_c15" alt="" /></td>
        <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
      <tr>
        <td rowspan="3"><img name="JandthePLandingPage_r3_c1" src="images/index_r3_c1.jpg" width="58" height="34" border="0" id="JandthePLandingPage_r3_c1" alt="" /></td>
        <td rowspan="2"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.gif',1);"><img name="home" src="images/home.jpg" width="58" height="30" border="0" id="home" alt="" /></a></td>
        <td rowspan="3"><img name="JandthePLandingPage_r3_c3" src="images/index_r3_c3.jpg" width="26" height="34" border="0" id="JandthePLandingPage_r3_c3" alt="" /></td>
        <td rowspan="2"><a href="bio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bio','','images/bio_over.gif',1);"><img name="Bio" src="images/Bio.jpg" width="52" height="30" border="0" id="Bio" alt="" /></a></td>
        <td rowspan="3"><img name="JandthePLandingPage_r3_c5" src="images/index_r3_c5.jpg" width="26" height="34" border="0" id="JandthePLandingPage_r3_c5" alt="" /></td>
        <td rowspan="2"><a href="media.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Media','','images/media_over.gif',1);"><img name="Media" src="images/Media.jpg" width="60" height="30" border="0" id="Media" alt="" /></a></td>
        <td rowspan="3"><img name="JandthePLandingPage_r3_c7" src="images/index_r3_c7.jpg" width="26" height="34" border="0" id="JandthePLandingPage_r3_c7" alt="" /></td>
        <td rowspan="2"><a href="studio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Studio','','images/studio_over.gif',1);"><img name="Studio" src="images/Studio.jpg" width="66" height="30" border="0" id="Studio" alt="" /></a></td>
        <td rowspan="3"><img name="JandthePLandingPage_r3_c9" src="images/index_r3_c9.jpg" width="35" height="34" border="0" id="JandthePLandingPage_r3_c9" alt="" /></td>
        <td rowspan="2"><a href="forum.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Forum','','images/forum_over.gif',1);"><img name="Forum" src="images/Forum.jpg" width="69" height="30" border="0" id="Forum" alt="" /></a></td>
        <td rowspan="3"><img name="JandthePLandingPage_r3_c11" src="images/index_r3_c11.jpg" width="22" height="34" border="0" id="JandthePLandingPage_r3_c11" alt="" /></td>
        <td rowspan="2"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact_over.gif',1);"><img name="Contact" src="images/Contact.jpg" width="70" height="30" border="0" id="Contact" alt="" /></a></td>
        <td rowspan="3"><img name="JandthePLandingPage_r3_c13" src="images/index_r3_c13.jpg" width="16" height="34" border="0" id="JandthePLandingPage_r3_c13" alt="" /></td>
        <td><img src="images/spacer.gif" width="1" height="29" border="0" alt="" /></td>
      </tr>
      <tr>
        <td rowspan="2"><img name="JandthePLandingPage_r4_c14" src="images/index_r4_c14.jpg" width="58" height="5" border="0" id="JandthePLandingPage_r4_c14" alt="" /></td>
        <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
      <tr>
        <td><img name="JandthePLandingPage_r5_c2" src="images/index_r5_c2.jpg" width="58" height="4" border="0" id="JandthePLandingPage_r5_c2" alt="" /></td>
        <td><img name="JandthePLandingPage_r5_c4" src="images/index_r5_c4.jpg" width="52" height="4" border="0" id="JandthePLandingPage_r5_c4" alt="" /></td>
        <td><img name="JandthePLandingPage_r5_c6" src="images/index_r5_c6.jpg" width="60" height="4" border="0" id="JandthePLandingPage_r5_c6" alt="" /></td>
        <td><img name="JandthePLandingPage_r5_c8" src="images/index_r5_c8.jpg" width="66" height="4" border="0" id="JandthePLandingPage_r5_c8" alt="" /></td>
        <td><img name="JandthePLandingPage_r5_c10" src="images/index_r5_c10.jpg" width="69" height="4" border="0" id="JandthePLandingPage_r5_c10" alt="" /></td>
        <td><img name="JandthePLandingPage_r5_c12" src="images/index_r5_c12.jpg" width="70" height="4" border="0" id="JandthePLandingPage_r5_c12" alt="" /></td>
        <td><img src="images/spacer.gif" width="1" height="4" border="0" alt="" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="34">&nbsp;</td>
    <td width="347" valign="top">&nbsp;</td>
    <td width="88" valign="top" halign="center"><img src="images/forum_tab.jpg" width="88" height="32" alt="Forum" /></td>
    <td width="169" valign="top" halign="left">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="42" height="402"><img src="images/side_spacer.jpg" width="40" height="30" alt="spacer" /></td>
    <td colspan="3" valign="top" halign="center"> 
<iframe width="100%" id="the_iframe" 
	onLoad="calcHeight();" 
	src="http://www.johnnyandtheproducers.com/forum/index.php" 
	scrolling="NO" 
	frameborder="0" 
	height="400">
An iframe capable browser is 
required to view this web site.
</iframe>

</td>
    <td width="40"><img src="images/side_spacer.jpg" width="40" height="30" alt="spacer" /></td>
  </tr>
  <tr>
    <td height="14" colspan="5"><img src="images/tracer_bottom.jpg" width="700" height="38" alt="copyright" /></td>
  </tr>
</table>
</body>
</html>

What you can do is have a javascript onload on the body of the forum pages. Use something like this:

function calledOnLoad() {
  window.top.getElementById('myiframe').style.height = document.scrollHeight;
}

I didn't test it and some of the properties might be different, but that should give you an idea. Ask me if you have any questions.

I did see something like this while searching, seems to be the best answer. Luckily it's a script on my site, so i have complete access to the pages. I'll give it a shot and let you know how it turns out.

What you can do is have a javascript onload on the body of the forum pages. Use something like this:

function calledOnLoad() {
  window.top.getElementById('myiframe').style.height = document.scrollHeight;
}

I didn't test it and some of the properties might be different, but that should give you an idea. Ask me if you have any questions.

This article has been dead for over six months. Start a new discussion instead.