Automatically adjust Iframe height? [Archive]

Vernier

01-27-2013, 12:08 PM

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:

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

sunfighter

01-27-2013, 03:20 PM

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:

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