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 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Automatically adjust Iframe height?

    Hi guys,

    I've created a dropdown which will show different forms when each button is clicked. They work correctly but the iframe height won't set at 100%.

    I'm currently using this:

    Code:
    <button class='button_$form[form_id]'>Show</button> $form[name]<div id='job_".$form[form_id]."'><iframe src='jobs.php?id=$form[form_id]' width='100%' scrolling='no'></iframe></div>
    Each forms height will be different so I can't just set it at (x)px. What's the best way to do this?

    Thanks
    Last edited by Vernier; 01-27-2013 at 12:18 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,166
    Thanks
    23
    Thanked 601 Times in 600 Posts
    You might need to fool around with the '-15' thingy a bit, but this worked for me in firefox. The getDocHeight() is so it works in all browsers and was the bane of trying to get this to work:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    
    <body onload="resizeIframe();">
    <iframe id="myframe" src='http://www.yahoo.com/' width='100%'></iframe>
    
    <script type="text/javascript">
    function resizeIframe() {
    document.getElementById('myframe').style.height = getDocHeight() - 15 + 'px';
    }
    
    function getDocHeight() {
        var D = document;
        return Math.max(
            Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
            Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
            Math.max(D.body.clientHeight, D.documentElement.clientHeight)
        );
    }
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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