SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 )">
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Logic,

    Thanks you so much - that works perfectly!

    Brilliant Stuff!

  4. #4
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by z06-dave View Post
    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?
    Tab-indentation is a crime against humanity.

  6. #6
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    And your URL is?
    Thanks for trying to help....

    Murray Motors of the Lehigh Valley | Used Car Dealership

  7. #7
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Z06-Dave View Post
    That iframe displays a page from a different domain, therefore its properties cannot be accessed.
    Tab-indentation is a crime against humanity.

  8. #8
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks again for the help...

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

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank U very much, It's very necessary with me !!!. Can u run code to IFRAME Auto Width ?

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vlbknl2 View Post
    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 //.
    Tab-indentation is a crime against humanity.

  11. #11
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  12. #12
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need the URL of a live demo.
    Tab-indentation is a crime against humanity.

  13. #13
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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! : )

  14. #14
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by liligi View Post
    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.
    Tab-indentation is a crime against humanity.

  15. #15
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  16. #16
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  17. #17
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DavidBaldwin View Post
    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.
    Tab-indentation is a crime against humanity.

  18. #18
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    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 ]

  19. #19
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DavidBaldwin View Post
    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.
    Tab-indentation is a crime against humanity.

  20. #20
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    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!

  21. #21
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DavidBaldwin View Post
    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>
    Tab-indentation is a crime against humanity.

  22. #22
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    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!

  23. #23
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  24. #24
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Tab-indentation is a crime against humanity.

  25. #25
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •