homepage Welcome to WebmasterWorld Guest from 54.237.153.141
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

    
iframe issues w/ netscape and opera
problems w/ scrollHeight and such
PhoenixOmega




msg:1584810
 6:29 pm on Sep 9, 2003 (gmt 0)

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




msg:1584811
 3:03 am on Sep 10, 2003 (gmt 0)

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




msg:1584812
 4:39 am on Sep 10, 2003 (gmt 0)

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




msg:1584813
 6:23 pm on Sep 10, 2003 (gmt 0)

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




msg:1584814
 9:50 pm on Sep 10, 2003 (gmt 0)

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




msg:1584815
 9:21 pm on Sep 12, 2003 (gmt 0)

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




msg:1584816
 9:22 pm on Sep 12, 2003 (gmt 0)

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

Purple Martin




msg:1584817
 11:12 pm on Sep 14, 2003 (gmt 0)

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




msg:1584818
 6:16 pm on Sep 15, 2003 (gmt 0)

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




msg:1584819
 10:57 pm on Sep 15, 2003 (gmt 0)

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




msg:1584820
 10:23 pm on Sep 16, 2003 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Opera Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved