Forum Moderators: open

Message Too Old, No Replies

iFrame Scaling

An iFrame Only as Big as its Page

         

inuwolf

7:45 pm on Oct 7, 2005 (gmt 0)

10+ Year Member



I have an iFrame that displays a page that varies in length from day to day (it's a .htt). Is there any way to set the iFrame's length to the length of the .htt page? The iFrame I have now almost always has either excess space at the bottom (when the page is too short) or a scrollbar (when the page is too long). This is ugly.

I know iFrames are a designer's no-no, so if anyone has any other suggestions for displaying my page, I would appreciate them. Of course, I would like an answer to my question too. :)

Thanks.

Robin_reala

10:44 pm on Oct 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yeah, but you have to use Javascript. Here's a solution I've used before:

function adjustIFrameSize (iframeWindow) {
if (iframeWindow.document.height) {
var iframeElement = document.getElementById
(iframeWindow.name);
iframeElement.style.height = iframeWindow.document.height + 'px';
iframeElement.style.width = iframeWindow.document.width + 'px';
}
else if (document.all) {
var iframeElement = document.all[iframeWindow.name];
if (iframeWindow.document.compatMode &&
iframeWindow.document.compatMode!= 'BackCompat')
{
iframeElement.style.height =
iframeWindow.document.documentElement.scrollHeight + 5 + 'px';
iframeElement.style.width =
iframeWindow.document.documentElement.scrollWidth + 5 + 'px';
}
else {
iframeElement.style.height =
iframeWindow.document.body.scrollHeight + 5 + 'px';
iframeElement.style.width =
iframeWindow.document.body.scrollWidth + 5 + 'px';
}
}
}

Then you need to add an onload to the body element of the page being called in the iframe:

<body onload="if (parent.adjustIFrameSize) parent.adjustIFrameSize(window);">

inuwolf

11:51 pm on Oct 7, 2005 (gmt 0)

10+ Year Member



thanks, this looks like what I want. sorry, where do I put the first part of your script in my code? it looks like it goes in the body, but where do I put it in relation to my iFrame tag:
<IFRAME SRC="/events.htt"></IFRAME>
?

Robin_reala

11:16 am on Oct 8, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Nope, just chuck it inside a <script> element inside the <head> section in your main page (not the iframed page).