iframe issues w/ netscape and opera

problems w/ scrollHeight and such

[PhoenixOmega]

Howdy fellow webmasters!

I got a problem that's been driving me crazy....i read some of the other posts on this forum about similar topics, and although i could solve my problem in IE, opera and netscape remain to be fixed.

I have an iframe who's height needs to fit the content. Now from what ive read on this site, document.body.scrollHeight should do the trick...so i used this simple function in the onLoad attrib of my iframe:

<SCRIPT type="text/javascript">
function resize()
{
document.getElementById('main').height=window.frames['main'].document.body.scrollHeight;
}
</SCRIPT>

This works stupendously perfect in IE, but in opera and netscape, it acts as if the height value was never set.

Thanks in advance...i know y'all will have an answer ;)

Jeff

[Purple Martin]

scrollHeight is IE only.

A possible workaround could be to put a div at the bottom of the iframe content, and use it's offsetTop property. It should give you the distance from the top of the div to the top of it's containing element (body if the div is not nested inside something else).

[gph]

I tested scrollHeight and it seems to work but it's inconsistent.

IE6 and Moz 1.4 get this

str = ''
for (i in document.body) {
if (i == 'scrollHeight') {
str += '<p>Property = ' + i + '<br>Value = ' + document.body[i] + '</p>'
}
}
document.write(str)

IE, Moz and Opera 7 alert true for this

alert('scrollHeight' in document.body)

This is different in all 3 unless the page is past the fold with content.

alert(document.body.scrollHeight)

Purple Martins suggestion is probably the best route.

[PhoenixOmega]

thx for response guys!

so i added a div to the bottom of my main frame and editted the resize() function to look like this:

document.getElementById('main').height=window.frames['main'].document.getElementByID('bottom_div').offsetTop;

the div i used:

<div id="bottom_div" name="bottom_div"></div>

Now it doesnt work in any of the browsers :(

[Purple Martin]

To help you debug and work out what's happening, put an alert in your resize function:

alert(window.frames['main'].document.getElementByID('bottom_div').offsetTop)

Play with the object reference syntax inside the alert until it gives you a number that looks right.

Also, the empty div might not be rendered. Try filling it with a non-breaking space:

<div id="bottom_div" name="bottom_div">&nbsp;</div>

[PhoenixOmega]

Thanks purple martin :)

Ok, after many doses of excedrin ive figured out why opera isnt workin...i call the resizing function in the onLoad of my iframe. This is recognized in ie and ns but not opera...so now my problem is getting opera to call the resize function when the contents of the iframe loads...this should be easy, but my problem is that i have to use an iframe for my navagation bar as well...and when i click on a link in the navbar is when i need resize() to be called AFTER the frame loads...well, heres the code:

<table bgcolor="#FFFFFF" align="center" frame="box" border="1" height="screen.height" cellpadding="0" cellspacing="0">
<tr bordercolor="#FFFFFF">
<td background="Images/back.jpg" rowspan="3" valign="top" height="100%" width="200">
<iframe height="100%" frameborder="0" scrolling="no" width="200" src="leftframe.htm" name="navbar"></iframe>
</td>
<td height="77" width="600" align="center" valign="top" colspan="2"><br><img src="images/banner.jpg"></td>
<tr bordercolor="#FFFFFF">
<td width="1"></td>
<td align="left" height="100%" valign="top"><div onLoad="resize()">
<iframe id="main" name="main" src="program/faculty.htm" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
</div></td>
<tr bordercolor="#FFFFFF">
<td height="65" valign="bottom" colspan="3"> <div align="center"> <br><img src="images/bottomline.jpg">
<br><br>
<a href="pages/contact.html">Contact Us</a> / <a href="mailto.html">Email Us</a> / <a href="">Home</a> /
<a href="http://www.tamu.edu">Texas A&M University</a><br>
<A TARGET="_parent" HREF="AAF.html">Admission and Funding</a> /
<A TARGET="_parent" HREF="program3.html">Program Information</a> /
<A TARGET="_parent" HREF="general3.html">General Info</a> /
<A TARGET="_parent" HREF="other3.html">Other Links</a> </div><br>
</td>
</tr>
</table>

Pls oh pls help me this one last time....i really appreciate y'all's help.

[PhoenixOmega]

fyi, the resize() call in the div didnt work.

[Purple Martin]

N4 had a document property called "loading" that you could read to find out if the document had finished loading. If only that property had been adopted by all the other browsers!

So here's what you can do: call the resize() function from a bit of javascript right at the end of the document (between the </body> and </html> tags).

NOTE: this will only give an accurate measurement of the div's position if all elements have a defined height, because although the DOM will be complete there may be elements within it which have not yet finished loading. So, for example, make sure all images have their heights explicitly set with height attributes. The same goes for table cells, divs, and anything else that might change size according to what's rendered within it.

...
</body>
<script>
resize()
</script>
</html>

[PhoenixOmega]

Interesting, thanks for all your help purple martin, one last thing...i got opera to finally get the right value, but it doesnt refresh the iframe. is there a refresh command to force opera to redraw the iframe? location.reload() just reloads the html content :(

[Purple Martin]

I've got no idea if this will work in Opera, but in IE you can force a div to re-draw with JavaScript by setting it's visibility to visible (even if it's already visible):

document.getElementById("contentDiv").style.visibility = "visible";

Sometimes to make it work you have to hide it and then show it again a millisecond later (you see a slight flicker, but as you're re-drawing anyway that generally doesn't matter):

document.getElementById("contentDiv").style.visibility = "hidden";
setTimeout('document.getElementById("contentDiv").style.visibility = "visible"',1);

I know it's a nasty hack but if it works it works!

[PhoenixOmega]

thanks a bunch purple martin! It turns out i updated from opera 7.11 to 7.2 beta and they fixed the prob. All your help has been apreciated! ;)