Page 1 of 3 123 LastLast
Results 1 to 10 of 26

Thread: Auto resizing an iframe to fit its contents

  1. #1
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Auto resizing an iframe to fit its contents

    I need to the iframe to autoresize according to the hight of its content, is that possible?
    Last edited by bojomojo; 12-07-2008 at 10:43 AM.

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    This can be done with javascript:
    Code:
    function resizeIframe(iframeID) {
    if(self==parent) return false; /* Checks that page is in iframe. */
    else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/
    
    var FramePageHeight = framePage.scrollHeight + 10; /* framePage
    is the ID of the framed page's BODY tag. The added 10 pixels prevent an
    unnecessary scrollbar. */
    
    parent.document.getElementById(iframeID).style.height=FramePageHeight;
    /* "iframeID" is the ID of the inline frame in the parent page. */
    }
    HTML Code:
    <body id="framePage" onload="resizeIframe('idTopFrame')">
    Credit to marsyas.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    will this work if the src of the iframe is from another domain?

  4. #4
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    Yes, it will resize the iframe on your page according to how big the other page is.

  5. #5
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    it is not working, nothing differs

  6. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Can you please post a link to your site, or attach the code to the page and the iframe?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  7. #7
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Iframe Page</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    <body>
    <iframe id="iframeID" src="http://domain.com/?group=testtemplate" width="100%"></iframe>
    
    </div>
    </body>
    </html>
    Iframe:
    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    function resizeIframe(iframeID) { 
    if(self==parent) return false; /* Checks that page is in iframe. */ 
    else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/ 
    
    var FramePageHeight = framePage.scrollHeight + 10; /* framePage 
    is the ID of the framed page's BODY tag. The added 10 pixels prevent an 
    unnecessary scrollbar. */ 
    
    parent.document.getElementById(iframeID).style.height=FramePageHeight; 
    /* "iframeID" is the ID of the inline frame in the parent page. */ 
    } 
    </script>
    </head>
    <body id="framePage" onload="resizeIframe('iframeID')" >
    Content Here
    </body>
    </html>

  8. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Might be this:
    Code:
    <body id="framePage" onload="resizeIframe('iframeID')" >
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  9. #9
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    i fixed this before you reply, and still doesnt work.

    Please look and make sure the JS is in the right page and the page onload is on the right one, i got confused which goes to the parent page and which to the framed page

  10. #10
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Yeah same here. I think that the javascript code should be on the main page, not in the iframe. Try that and see what happens.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

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
  •