iframe autoresize help

Hi,

I am currently using this code in the body of my 'index.php':

Code:

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

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

and this is the line for my iframe:

Code:

 <iframe name="main" onload="calcHeight();" scrolling="no" width="990"  id="main" src="home.php" frameborder="0" allowtransparency="true"><p>Your browser does not support inline frames.</p></iframe>

That works fine for the front page, but as soon as i link another page into the iframe using "target='main'", it won't resize the iframe to the page's height.

Can someone lead me on the right track please?

Dane.

 

calcHeight() will need to be called each time the page is loaded. Onload just calls it the first time the frame is displayed. I see 3 ways of solving this:
1. Add another event handler that calls calcHeight() when the page changes after it's loaded. I'm not sure which would work: onfocus, onactivate, onreadystatechange, onafterupdate (IE-only?)
2. Create a polling script that checks every second or so to see if the page has changed, and if so, change the height.
3. Put onclick="calcHeight()", or maybe onmouseup="calcHeight()" in each link with that target.

 

I still don't fully understand what you are getting at sorry.

So I need to call calcHeight() on each target page?

If that is what you mean, how do I do this?

 

You would have to change each link to do it from the frame. These are the other two ways:

1:

Code:

<iframe name="main" onload="calcHeight();" onreadystatechange="if(document.getElementById('main').readyState=="complete")calcHeight();" scrolling="no" width="990"  id="main" src="home.php" frameborder="0" allowtransparency="true"><p>Your browser does not support inline frames.</p></iframe>

will work for Internet Explorer, but not Firefox. I'm afraid I haven't thought of a good way to do this in FF.

2: Polling would change the function to be something like

Code:

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

  //change the height of the iframe
  document.getElementById('main').height=the_height;

  //setup polling in case frame is changed
  setTimeout("calcHeight()",1234);//wait 1.234 seconds before resizing frame
}
//-->
</script>

 

Thanks man.
finally I found this code .
It work 100% but I add 50px to the height to be safe .