Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Iframe Auto Re-Size

    Sup everyone

    I'm trying to find a script that will automatically resize the height of an iframe depending on the document it contains. I found the script here:

    Code:
    <!--
    function calcHeight()
    {
      //find the height of the internal page
      var the_height=
        document.getElementById('the_iframe').contentWindow.
          document.body.scrollHeight;
    
      //change the height of the iframe
      document.getElementById('the_iframe').height=
          the_height;
    }
    //-->
    The only problem is that although it gets larger when the page changes, it doesn't get smaller. Any one know how to fix this???

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    The scrollHeight of the document might depend on the original size of the iframe; have you tried setting it to 0 to begin with?

  • #3
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what do you mean? could u explain?

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    I'm just guessing here, but I thought maybe the inner page got its default scrollHeight from the default height of the iframe, and then only expanded if it had to (hence the iframe gets larger but not smaller).

    So if you set the iframe height to 0 in the HTML, the default scrollHeight will be 0 as well.

    Code:
    <iframe name="the_iframe" height="0"></iframe>
    Something to try...

  • #5
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tryed it, but it didn't work... any other ideas?

  • #6
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>dynamic iframe test</title>
    <script type="text/javascript">
    function resizeFrame(frame) {
    var f=frame.contentWindow.document.getElementsByTagName("html")[0];
    frame.height=f.scrollHeight;
    }
    </script>
    </head>
    <body onload="resizeFrame(document.getElementById('the_iframe'))">
    <iframe id="the_iframe" width="400" height="0" src="frame.html" border="1"></iframe>
    </body>
    </html>
    This works perfectly for me in IE8, FF3.5 and OP11.

    frame.html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <div style="width:250px;height:250px;background-color:gray">
    </div>
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tryed your script, but it didn't work. any other ideas?

  • #8
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Hmm. Which browser are you testing in? Can I see the full code?


  •  

    Posting Permissions

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