View Full Version : A frame that adjusts to document size?

09-29-2003, 08:15 PM
Here's a question for you..

I've got a page which I intend to have a large .htm load within a frame. The idea is to have the document load in the frame in a way to where the scrollbars are no longer visible.

I know this can be done by simply adjusting the frame size to the exact dimensions of the loaded .htm...

My question: Is it possible to auto adjust the length of the frame to accomodate the loaded page as the user clicks on different items within that frame inevitably loading different pages?

The idea is to make the frame "invisible" regardless of what is loaded within.

I've been so impressed with the level of knowledge on this forum.. the stuff I've learned from you guys is amazing. Thank you all in advance for your help!

09-30-2003, 12:29 AM
I'm not sure I understood exactly what you want.

If you want to adjust the height of an iframe to its content, this ought to work (if I remember correctly):

function adjustIFrame() {
document.getElementById("frameId").style.height = self.frames["frameName"].document.body.scrollHeight;

You call this function from "onLoad" in the document loaded inside the iframe:

<body onload="parent.adjustIFrame();">

If you want to hide the iframe:

document.getElementById("frameId").style.display = 'none';

09-30-2003, 12:49 AM

10-02-2003, 11:31 PM
Here is what I have:

I've got content of which I have control of the headers and footers of(We'll call that page B). All the content inbetween I have no control of.

What I've got as the parent page is nothing but headers and footers(We'll call that page A).

My objective is to have the content from page B display in the middle of page A. I can do this with frames.. but I want the frame to adjust in size depending on the length of page B as it will change constantly... all this so it will appear seamless with no scrollbars

Is there any way I can do this with frames effectively?

Thanks for all your help in advance!

10-03-2003, 12:12 AM
This guy is trying to accomplish the exact same thing as I am:


Any ideas?

10-03-2003, 10:24 PM
This code works for me:

resizeIFrame = function(doc, iframeID){
var minimumPageHeight = 300;
document.getElementById(iframeID).style.height = (minimumPageHeight>doc.body.scrollHeight ? minimumPageHeight : doc.body.scrollHeight)+"px";


<iframe id="bodyIframe" src="page.html">

Where doc is the the document of the page loaded inside the iframe (page.html):

<body onload="parent.resizeIFrame(document, 'bodyIframe')">

The variable minimumPageHeight is used if you want to keep a minimum height on the site, optional in other words.

10-04-2003, 12:00 PM
...or you can use screen.availHeight/2 as a relative coordinate of axis...

anyway, as a bonus, for a better accuracy, you should first check not to interfere with some CSS position styles of the same id. I mean, you shoud firmily position your iframe using only styles on-fly, otherwise, for a couple of seconds, your iframe will have a certain position, than, after the script is loaded, will have the final one. If you can not avoid that, make the visibility hidden, in CSS, than switch it to visible from the script, on fly.