IFRAME Auto Height

Hi there,

I've done a few searches and tried a few solutions but neither of them do what I want so I'm asking here to see if anyone knows of a way to automatically resize an iframe so that it extends to show 100% of the content without a scrollbar?

I'm using an Iframe to make a PHPBB forum that I have embed into a website I have built. I control the content for both so I can manipulate the HTML/CSS of both... I need the IFRAME to fully extend to the height of the forum index page, which I have been able to do using simple CSS styling but whenever you click a link in the forum to take you to another page, it keeps the same height instead of adopting the height of the new page so you lose half the content.

So does anybody know if there is a way with javascript (or any other method) that I can tell my IFRAME to re-adjust it's height each time the frame is refreshed with new data so I can always see 100% of the content without having to scroll?

Code:

---

<script type='text/javascript'>

function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
 var ifDoc, ifRef = document.getElementById( iframeId );

 try
 { 
  ifDoc = ifRef.contentWindow.document.documentElement; 
 }
 catch( e )
 {
  try
  {
  ifDoc = ifRef.contentDocument.documentElement; 
  }
  catch(ee)
  { 
  } 
 }
 
 if( ifDoc )
 {
  ifRef.height = 1; 
  ifRef.height = ifDoc.scrollHeight;
 
  /* For width resize, enable below.  */
 
  // ifRef.width = 1;
  // ifRef.width = ifDoc.scrollWidth;
 }
}

</script>

<iframe id = "myIframe"  onload = "setIframeHeight( this.id )">

---

Hi Logic,

Thanks you so much - that works perfectly!

Brilliant Stuff!

I am trying this code on my site and it is not working. But yet if I pull up the site on my iphone, it works, I'm confused. I'm using ie 8.

Quote:

---

Originally Posted by z06-dave

i am trying this code on my site and it is not working. But yet if i pull up the site on my iphone, it works, i'm confused. I'm using ie 8.

---

And your URL is?

Quote:

---

Originally Posted by Logic Ali

And your URL is?

---

Thanks for trying to help....

Murray Motors of the Lehigh Valley | Used Car Dealership

Quote:

---

Originally Posted by Z06-Dave

Thanks for trying to help....

Murray Motors of the Lehigh Valley | Used Car Dealership

---

That iframe displays a page from a different domain, therefore its properties cannot be accessed.

Ok, thanks again for the help...

Anyone now of any solution? I've searched everywhere...

Thank U very much, It's very necessary with me !!!. Can u run code to IFRAME Auto Width ?

Quote:

---

Originally Posted by vlbknl2

Thank U very much, It's very necessary with me !!!. Can u run code to IFRAME Auto Width ?

---

Yes, just un-comment the lines indicated in the code. That means remove the //.

I'm using your method and have a problem I was wondering if you could help me through.

The good news, this is the only code I've found that resizes bigger and smaller depending on the iframe content on page.

The bad news, it only works in Firefox. I've tried it in safari and chrome and it's not working at all. The frame is there but nothing appears in it and nothing happens when I click buttons.

Also, the default frame that I want to start off with appearing in the iframe when the home page loads does not appear but when i click to something else (in firefox, since that's the only browser it works in, as stated before), and then click back to the home page, THEN it appears. Do you think you could help me with these problems? Thanks!

I need the URL of a live demo.

Here you go: http://www.dentalsmilesunlimited.com/htdocs/

The only set of buttons that are working with the iframe right now are the buttons under the "OFFICE" tab. Everything else isn't set up yet, so don't click those.


Don't worry about the iframe being cut off center or the footer not moving with the iframe. Those are all things I will fix later. The most important thing is the iframe and the problems I listed above.

I've got to warn you, I don't know much about jquery. I usually just search around for the effect I want and copy, paste, fill in the spaces, but this is a particular problem that I just can't figure out. I have to embed background music to this thing (I know... tacky), but the only way to make sure the song doesn't restart over and over for every page that is visited is if the main content is in that iframe and the music is stored on the parent page. Thus I really don't have another option... especially since I don't know AJAX either.

Sorry for the long explanation. Just clarifying for you. Take it easy on me. I might ask some newbie questions. Thank you in advance! : )

Quote:

---

Originally Posted by liligi

Here you go: http://www.dentalsmilesunlimited.com/htdocs/

---

For me only Chrome/Safari fails to load content, which I cannot attribute to the resizing code.

On Firefox I.E. and Opera, content loads and resizing operations take place. If you want to prove it, you can enter the following line in the address bar after each different menu selection:

javascript:alert(document.getElementById('mainframe').offsetHeight);

Your page is failing to load "http://www.dentalsmilesunlimited.com/htdocs/js/jquery-1.5.1.js" on account of its absence.

Thanks for the quick reply. I took out jquery-1.5.1.js because it was giving me an error WITH it. I figured it was because I made a mistake by loading jquery twice. But the code still works with Opera and FF like you said.

So is it just one of those inexplainable kinks? Since it works in those but not Safari and Chrome?

This is script is great! I use Google Chrome and its works just like it needs to. But, now I opened my test file in Firefox and Safara (Mac I use BTW), and it doesn't work. Do you have any idea why not perhaps? Here's my test-url: http://tinyurl.com/7fkq8oq

Quote:

---

Originally Posted by DavidBaldwin

This is script is great! I use Google Chrome and its works just like it needs to. But, now I opened my test file in Firefox and Safara (Mac I use BTW), and it doesn't work. Do you have any idea why not perhaps? Here's my test-url: http://tinyurl.com/7fkq8oq

---

Before trying to diagnose that script, I suggest you fix the indicated script errors.

Quote:

---

Originally Posted by Logic Ali

Before trying to diagnose that script, I suggest you fix the indicated script errors.

---

I'm sorry, but I'm not sure if I understand what you mean: how do I "fix" the errors? Where can I see the errors in the first place? [sorry... but I'm not a js expert :)]

Quote:

---

Originally Posted by DavidBaldwin

I'm sorry, but I'm not sure if I understand what you mean: how do I "fix" the errors? Where can I see the errors in the first place? [sorry... but I'm not a js expert :)]

---

Error messages are shown in the error console: Ctrl +Shift + J (in Firefox).

The main error seems to stem from this function call: document.fire('dom:loaded');

whose parameter should be an element reference not a string. I suggest you consult whoever wrote that for you.

I ran some tests and it seems that the resizing problem is caused by not having www. in the URL, causing a cross-domain access error.

Quote:

---

Originally Posted by Logic Ali

Error messages are shown in the error console: Ctrl +Shift + J (in Firefox).

The main error seems to stem from this function call: document.fire('dom:loaded');

whose parameter should be an element reference not a string. I suggest you consult whoever wrote that for you.

I ran some tests and it seems that the resizing problem is caused by not having www. in the URL, causing a cross-domain access error.

---

Well the script I took right at the top of this thread, 2nd post (it's your script :)), so that is why I asked here. I think the www could indeed be an issue, but if I add that to the URL, firefox will simply remove it.*So how could this work, with not having a www in front?
Thanks again!

Quote:

---

Originally Posted by DavidBaldwin

I think the www could indeed be an issue, but if I add that to the URL, firefox will simply remove it.

---

That's not what I get: http://www.facebust.me/test.html
However if you want to restore the www in cases where it doesn't get specified, you could try running this code in the <head> of your parent page:

Code:

---

<script type="text/javascript">

(function( subDomain )
{
  var href = location.href,
      locn; 
   
  if( href.indexOf( 'http' ) == 0 && !href.match( ":\/{2,}" + subDomain + "\." ) )
  {
    locn = href.split( /:\/{2,}/ ); 
   
    location.href = locn[ 0 ] + "://" + subDomain + "." + locn[ 1 ];
  } 
   
})( 'www' );

</script>

---

Quote:

---

Originally Posted by Logic Ali

That's not what I get: http://tinyurl.com/7fkq8oq
However if you want to restore the www in cases where it doesn't get specified, you could try running this code in the <head> of your parent page:

Code:

---

<script type="text/javascript">

(function( subDomain )
{
  var href = location.href,
      locn; 
   
  if( href.indexOf( 'http' ) == 0 && !href.match( ":\/{2,}" + subDomain + "\." ) )
  {
    locn = href.split( /:\/{2,}/ ); 
   
    location.href = locn[ 0 ] + "://" + subDomain + "." + locn[ 1 ];
  } 
   
})( 'www' );

</script>

---

---

It is, simply compressed using the website jscompressor.com. Anyways, I added that script you recommended and it works now! Thank you! By the way: can you please change the URL in your post to the tinyurl, http://tinyurl.com/7fkq8oq, that way it won't show up in Google :)? Thanks again!

One thing that is weird, is that on the test page it works fine in FF, but when I implement it on my live site, it doesn't work anymore - it simply sets the height to 0. It does work great in Safari & in Chrome. Any suggestions?

Try this version, otherwise show your URL.

Code:

---

<script type='text/javascript'>

function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
  var ifDoc, ifRef = document.getElementById( iframeId ), tempW, tempH;

  try
  { 
    ifDoc = ifRef.contentWindow.document.documentElement; 
  }
  catch( e )
  {
    try
    {
      ifDoc = ifRef.contentDocument.documentElement; 
    }
    catch(ee)
    { 
    } 
  }
 
  if( ifDoc )
  {
    tempH = ifDoc.scrollHeight; 
    ifRef.height = 1; 
    ifRef.height = tempH;
 
    /* For width resize, enable below.  */
 
    //tempW = ifDoc.scrollWidth;
    //ifRef.width = 1;
    //ifRef.width = tempW;
 }
}

</script>

---

Quote:

---

Originally Posted by Logic Ali

Try this version, otherwise show your URL.

Code:

---

<script type='text/javascript'>

function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
  var ifDoc, ifRef = document.getElementById( iframeId ), tempW, tempH;

  try
  { 
    ifDoc = ifRef.contentWindow.document.documentElement; 
  }
  catch( e )
  {
    try
    {
      ifDoc = ifRef.contentDocument.documentElement; 
    }
    catch(ee)
    { 
    } 
  }
 
  if( ifDoc )
  {
    tempH = ifDoc.scrollHeight; 
    ifRef.height = 1; 
    ifRef.height = tempH;
 
    /* For width resize, enable below.  */
 
    //tempW = ifDoc.scrollWidth;
    //ifRef.width = 1;
    //ifRef.width = tempW;
 }
}

</script>

---

---

Sadly this didn't work either, shoot! Really appreciate your help...