SitePoint Sponsor

User Tag List

Results 1 to 25 of 31

Hybrid View

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

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

  5. #5
    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 ]

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

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

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

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

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

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

  12. #12
    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 ?

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

  14. #14
    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!

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

  16. #16
    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! : )

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

  18. #18
    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?

  19. #19
    SitePoint Member
    Join Date
    Jul 2012
    Location
    Leicester
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although this is possible I would call the method a bit of a "hack" and wouldn't really reccomend it.

    AJAX would be a much better solution

  20. #20
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SimplyWebsites View Post
    Although this is possible I would call the method a bit of a "hack" and wouldn't really reccomend it.

    AJAX would be a much better solution
    Would you care to outline the algorithm you would apply?
    Tab-indentation is a crime against humanity.

  21. #21
    SitePoint Member
    Join Date
    Jul 2012
    Location
    Leicester
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    Would you care to outline the algorithm you would apply?
    My approach would depend on what exactly I am trying to do.

    What are you using the iFrame for?

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SimplyWebsites View Post
    My approach would depend on what exactly I am trying to do.

    What are you using the iFrame for?
    Apparently it's wrapping a forum of his. When people visit different pages of his forum, he wants the iframe to change height depending on the content on the page inside of the iframe.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Member
    Join Date
    Jul 2012
    Location
    Leicester
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Apparently it's wrapping a forum of his. When people visit different pages of his forum, he wants the iframe to change height depending on the content on the page inside of the iframe.
    See my approach to this would be to not have the forum in the iFrame anyway!

    Are you doing this because you want a consistent design on your website and forum. If so I'd highly recommend getting your forum templated. Having a forum in an iframe seems like a terrible idea. Firstly you wont be able to link to threads, but there are many other reasons

    I just realised you said in the OP that it was a forum, Totally missed this when I first read it

  24. #24
    SitePoint Member
    Join Date
    Jul 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to utilise the code that you provided to CB Resources In October 2010

    but as yet haven't been able to work out exactly how I use it.

    That is because of course because I am very new to JavaScript design.

    Can I just ask for a little bit of assistance in setting it up correctly

    thank you


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
  •