View Full Version : Copy iFrame height from another iFrame at resize?

08-18-2008, 04:25 PM
Hey Guys!
I have fairly good skills in Javascript but there is one thing I just can't seem to crack. My problem is such... :confused:

I have two iFrames aligned beside each other. Both with dynamic content. However, there is one iFrame that is the one that gets most updated (height-wise) and that is the left iFrame.

I have tried to adjust the right iFrame to have the exact height that the left iFrame has when the left one gets it's content updated, but with no luck what so ever.

How can i resize the right iFrame to the same height as the left one gets when it's updated with new content and at?

Sooo... What I mean is: How can I make the right iFrame inherit the left iFrames height when the left iFrame is updated?

I am using this script to resize the iFrames when new content is loaded into them:

Let's call the iFrames:

Left One: "m1"
Right One: "m2"

<script language="JavaScript">
function autoResize(id){
var newheight;
var newwidth;

newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;

document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";

I am in a serious deadline trouble and would be so greatful for any quick and reliable solutions for this problem.

Thank you guys!

08-18-2008, 10:15 PM
I'm trying to figure out the same thing look here. (http://codingforums.com/showthread.php?t=146856)

I think though that your solution can be done with alittle more css and a little bit of javascript.

Put both iframes in the same div container:

<div id="container"><div id="frame1"></div><div id="frame2"></div>

The CSS code:

#container {height:auto;}
#frame1 {height:100&#37;;}
#frame2 {}

and heres a javascipt I found that might help you dramtically change the iframe2 size based on content:

function resizeIframe(iframeID) {
if(self==parent) return false; /* Checks that page is in iframe. */
else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/

var FramePageHeight = framePage.scrollHeight + 10; /* framePage
is the ID of the framed page's BODY tag. The added 10 pixels prevent an
unnecessary scrollbar. */

/* "iframeID" is the ID of the inline frame in the parent page. */
and run it on load

"<body id="framePage" onload="resizeIframe('idTopFrame')">"

08-19-2008, 10:56 AM
That totally helped me out in a major way!
I have, however, now another problem that I am kind of stuck with.

I am making a new thread about it so it's not getting lost in all this...