IFRAME Auto Height

**CBResources** · Apr 1, 2011 07:09

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?

**Logic Ali** · Apr 1, 2011 09:32

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 )">

**CBResources** · Apr 3, 2011 08:02

Hi Logic,

Thanks you so much - that works perfectly!

Brilliant Stuff!

**Z06-Dave** · Aug 15, 2011 15:57

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.

**Logic Ali** · Aug 15, 2011 16:17

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?

**Z06-Dave** · Aug 15, 2011 16:48

Originally Posted by Logic Ali

And your URL is?

Thanks for trying to help....

Murray Motors of the Lehigh Valley | Used Car Dealership

**Logic Ali** · Aug 15, 2011 17:00

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.

**Z06-Dave** · Aug 15, 2011 18:06

Ok, thanks again for the help...

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

**vlbknl2** · Aug 15, 2011 20:44

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

**Logic Ali** · Aug 16, 2011 04:28

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 //.

**liligi** · Oct 18, 2011 14:31

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!

**Logic Ali** · Oct 18, 2011 18:55

I need the URL of a live demo.

**liligi** · Oct 18, 2011 19:45

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! : )

**Logic Ali** · Oct 19, 2011 06:47

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.

**liligi** · Oct 19, 2011 09:31

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?

**DavidBaldwin** · Jun 28, 2012 18:54

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

**Logic Ali** · Jun 29, 2012 02:36

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.

**DavidBaldwin** · Jun 29, 2012 07:08

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

]

**Logic Ali** · Jun 29, 2012 08:35

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.

**DavidBaldwin** · Jun 29, 2012 08:41

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!

**Logic Ali** · Jun 29, 2012 12:12

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>

**DavidBaldwin** · Jun 29, 2012 12:17

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!

**DavidBaldwin** · Jun 29, 2012 13:52

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?

**Logic Ali** · Jun 29, 2012 16:58

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>

**DavidBaldwin** · Jun 29, 2012 19:18

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...

User Tag List

Thread: IFRAME Auto Height

Thread Tools

Display

IFRAME Auto Height

Works in Chrome... but not in FF or Safari?

Bookmarks

Bookmarks

Posting Permissions