IFrame resize to content height

[WhatJac]

Hello,

I have a webpage with an IFrame in it. The content for the IFrame could change per page and with it size. I don't want scrollbar's inside the IFrame but rather for the whole page. To accomplish this I must resize the height of the IFrame (width = fixed). But I can't seem to accomplish this.

The links within the Iframe load the new content but I have to access the parent document to be able to resize the IFrame height. Anyone any idea how I can resize the iframe from within javascript in the IFrame.

Thanks in advance.

[Fang]

http://www.dynamicdrive.com/dynamici...iframessi2.htm

[WhatJac]

Seen that link multiple times before, but that didn't work.

But I found a version that looks good @
http://www.webdeveloper.com/forum/sh...=iframe+resize

I am able to resize the window now, although it still has some strange behaviour (in Firefox I get a scrollbar now and then and I often have large blank space under/within the IFrame)

[WhatJac]

I got this now:

window.resizeframe = function (iframeName){
	var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
	if (iframeEl) {
	 iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous

      var x,y;
      var test1 = document.body.scrollHeight;
      var test2 = document.body.offsetHeight
      if (test1 > test2) // all but Explorer Mac
      { y = document.frames[iframeName].document.body.scrollHeight;; }
      else // Explorer Mac;
      //would also work in Explorer 6 Strict, Mozilla and Safari
      {  y = document.body.offsetHeight; }
	 var new_h = y; 
	 iframeEl.style.height = new_h + "px";
	}
}

Only it does not work in FF. It gives me a scrollbar within my IFrame, which I do not want. Any suggestions?

document.getElementById(iframeName).contentDocument.body.offsetHeight

does not work.

[Sterling Isfine]

See if this works for you:

<script type='text/javascript'>

function sizeToMyContent( ifRef, setW, setH, fMargin )
{
 var ifDoc, margin = typeof fMargin === 'number' ? fMargin : 16;
 
 try
 { 
  ifDoc = ifRef.contentWindow.document.getElementsByTagName("body")[0];
 }
 catch( e ){ ifDoc = null; }
 
 if( ifDoc )
 {
  if( setH ) 
   ifRef.height = ifDoc.scrollHeight + margin; 
 
  if( setW ) 
   ifRef.width = ifDoc.scrollWidth + margin;
 }
  
}

</script>

<iframe src='myfile.htm' onload='sizeToMyContent(this, true, true);' ></iframe>

[WhatJac]

Thanks for your reply, but unfortunately it does not work. It sets the iframe height to 150.

ps: This is the Iframe:

<iframe id="leftiframe" src="<?=$page?>" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%;">
</iframe>

[Sterling Isfine]

Need to see a live demo.

[WhatJac]

Live demo is at: http://muzieknew.wajow.com

please note that I am still currently editing the code to try to get it to work

[Sterling Isfine]

Live demo is at: http://muzieknew.wajow.com

please note that I am still currently editing the code to try to get it to work

I don't quite understand why the size was reported as it was, but the changed code below was tested on a ripped copy of your site.
Chrome and IE were complaining of cross-domain access but it may have been the way I was testing it.
Just install it as before and remove any other resizer installed on any page.
You should use the Firefox error console to fix other script errors occurring on your site.

<script type='text/javascript'>

function sizeToMyContent( ifRef, setW, setH, fMargin )
{
 var ifDoc, margin = typeof fMargin === 'number' ? fMargin : 16;
 
 try
 { 
  ifDoc = ifRef.contentWindow.document.documentElement;
 }
 catch( e ){ ifDoc = null; }
 
 if( ifDoc )
 {    
  if( setH ) 
   ifRef.height = ifDoc.scrollHeight + margin; 
 
  if( setW ) 
   ifRef.width = ifDoc.scrollWidth + margin;
 }
  
}

</script>

[WhatJac]

Alright I will try. I know about the other errors, but the site is currently under development. I'll get back to you soon.

[WhatJac]

Wow man, this seems to work!

I only had to add an

   ifRef.height = 0;

To make sure that it also shrinks in size. Thanks!