iframe height should vary with content

Forum Moderators: not2easy

Message Too Old, No Replies

iframe height should vary with content

yver

10:37 pm on Jan 21, 2004 (gmt 0)

Hello list,

has a main content div that contains an iframe to enable loading external url's.
i have not found a way to have the div/iframe heights adjust to the varying content of the iframe.
Currently, the only way to display is to have a really tall div as wrapper for the iframe.
This is a bad solution, since on short pages there is a lot of empty white space below the content. Worse yet, pages longer than the height of the wrapper div display double scrollbars.

Current css validates.

clues?

thanks,
Andres

[edited by: tedster at 2:19 am (utc) on Jan. 22, 2004]

jimbeetle

10:49 pm on Jan 21, 2004 (gmt 0)

Welcome to WW, yver.

You might want to use the "Owner Edit" button and delete the link to your site as WW's ToS [webmasterworld.com] doesn't permit them.

I played around with this same scenario a few months ago and came to the conclusion that -- at least with my limited ability -- it's impossible.

Would be very interested if anybody else comes up with anything.

superzorro

10:16 am on Feb 13, 2004 (gmt 0)

been googling about the same problem - and i found this great javascript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="javascript">
function getElement(id) {
return document.getElementById? document.getElementById(id) : document.all? document.all(id) : null;
}
function getIFRAME_doc_height(oIframe) {
return document.body && document.body.scrollHeight? oIframe.document.body.scrollHeight : oIframe.document.height? oIframe.document.height : null; }
function IFRAME_size_to_content(iframe_id) {
var oIframe = frames[iframe_id];
if (typeof oIframe!= 'undefined') {
var wid = getElement(iframe_id).offsetWidth;
var hgt = getIFRAME_doc_height(oIframe); if (wid && hgt) oIframe.resizeTo(wid,hgt);
}
}
onload = function() {
IFRAME_size_to_content('testcontent');
}
</script>
</head>
<body>
<iframe name="testcontent" id="testcontent" width="100%" src="kitti_uhe.html" frameborder="0">
</iframe>
</body>
</html>

isitreal

5:25 pm on Feb 13, 2004 (gmt 0)

That script is a great idea, but be extremely careful with it, if you set the iframe width to anything other than 100% the script will actually resize mozilla's window itself, which is an awful affect. It also doesn't work at all on Opera. I thought that was a little too good to be true. It does work very well on IE though. You probably would want to set a height limiter on it since it will make the iframe as high as its content, but if it's just a few urls it won't matter much.

DrDoc

6:13 pm on Feb 13, 2004 (gmt 0)

In general -- if you want something to resize, don't use a static size element :)
Use a div instead :)

jimbeetle

6:41 pm on Feb 13, 2004 (gmt 0)

Use a div instead

But the idea is to load an external page.

I did though find this on using an iframe as a buffer -- load the external page into a hidden iframe, then use innerHTML to load the iframe content into a div.

http://www.dyn-web.com/dhtml/iframes/buffer.html

I'm not going to have time to play around with it for a couple of days but will post if and when I make any headway.

DrDoc

6:58 pm on Feb 13, 2004 (gmt 0)

Wouldn't it be much easier to actually load the external page, and have that page load whatever "padding" it needs around it (such as navigation etc). Otherwise you'll end up with orphaned pages...

jimbeetle

7:48 pm on Feb 13, 2004 (gmt 0)

Basically what I'm trying to do is to get away from using frames for a specific affiliate program. The navigation has gotten a bit convoluted and I just don't like it. Figure if I don't like it, my visitors don't either.

The idea I was fiddling with the past few months was to replace the frame page with a regular html page that includes an iframe; this regular page would carry all of the navigation. In that iframe I would load an external page from my site; this page would carry the info for the specific widget. Links from this page would load the appropriate page from the affiliate site.

Main Widget Page
with nav, etc.

My Widget Info Page
with links to
Affiliate Page

I wanted the transition from my widget data page to the affiliate page to look seamless -- without scroll bars and other weird behaviour -- and this has proved the sticking point with differing page lengths.

As for orphaned pages, I'm hoping it can be taken care of by checking for if(top==self) and maybe a fiddling a dynamic frameset script for use with iframes, but haven't actually yet gotten to that point.

This might all prove for naught since I'm also investigating a completely different direction to go. Still, any ideas on this approach would be much appreciated.