...

View Full Version : Iframe Auto Re-Size



kaos8000
12-07-2009, 03:33 AM
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:


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

gusblake
12-07-2009, 11:22 AM
The scrollHeight of the document might depend on the original size of the iframe; have you tried setting it to 0 to begin with?

kaos8000
12-07-2009, 11:00 PM
what do you mean? could u explain?

gusblake
12-07-2009, 11:39 PM
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.


<iframe name="the_iframe" height="0"></iframe>

Something to try...

kaos8000
12-08-2009, 04:33 AM
I tryed it, but it didn't work... any other ideas?

gusblake
12-08-2009, 02:59 PM
<!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



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

kaos8000
12-10-2009, 01:58 AM
I tryed your script, but it didn't work. any other ideas?

gusblake
12-10-2009, 12:39 PM
Hmm. Which browser are you testing in? Can I see the full code?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum