Iframe Auto Re-Size

[kaos]

Sup everyone

I'm trying to find a script that will automatically resize the height of an iframe depending on the document it contains. I found the script here:


<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;

//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->

The only problem is that although it gets larger when the page changes, it doesn't get smaller. Any one know how to fix this???

[kaos]

Are you serious?! Nobody knows how to do this???:eek:

[jscheuer1]

Most folks who know anything about it don't want to touch this sort of question. The iframe is non-standard. As such any scheme for this sort of thing varies by browser, and is also subject to a high degree of influence from the markup on both the top page and the page in the iframe. This too varies by browser. This is not to say that it couldn't be worked out for a specific case, but it is also highly likely that there are numerous cases where it cannot be.

Generally, the mission is to import content to the top page without refreshing the top page. AJAX, with all its issues surrounding any javascript that you want to run against the imported content, is a much better choice for that.

[kaos]

You're probably right... but this is really important. you have any idea where i could get help with this?

[jscheuer1]

Well, as I say, iframe would be far from my first choice for this. Instead of asking for:


a script that will automatically resize the height of an iframe depending on the document it contains

Answer me this. Why do you want that? What are you trying to do that makes you think that you need that?

[kaos]

Well, my sites uses an iframe right in the middle of the page. its the center of the site. the reason i want it to change height is because all of my other pages are viewed from it, some of which a kinda long. it is distracting and doesnt look good with the scrollbar either.

[jscheuer1]

Sounds like you are locked into an archaic and non-standard setup.

[kaos]

What do you think i should do?

[jscheuer1]

Well, and my apologies if this or anything I've already said sounds harsh, IMO iframe is questionable at best. It's OK, I guess, and even I will use it for one off sort of things. By one off (in this case) I mean something that isn't crucial for the site. And more to the point, one off of the site. Like something that pops up if supported that also has a fall back if the iframe and/or its content are not supported.

I believe this is the general consensus on this issue with folks who do a lot or even some professional coding. If not, then the consensus would likely be to avoid iframe like the plague.

From what you've said so far, in order to follow either of these philosophies would probably require a major redesign. Are you prepared for that if it comes to it?

Anyways, most of what iframe is generally used for when it is used as extensively as you seem to be indicating it is used on your site can be accomplished with one or a combination of the following (in no particular order):


AJAX
Server side code
Separate pages


There may be other approaches. To best tell what might work with your site, I would need more than:


my sites uses an iframe right in the middle of the page. its the center of the site

to go on.

Is this more than one site? If so how many? Can you provide a link to the site (or if more than one, to one of the sites that is the most basic and typical in its use of iframe)?

Answer those three questions, and if the answer to the last one (providing a link) is yes, please do so.

Then I would be better able to solve, or at least offer ideas to solve things without iframe.

One other bit of information I would need is whether or not you have server side coding available on the server(s) you are trying this on. Do you?

[kaos]

sorry, that was a typo... it is only one site. also, i can't provide a link cause its not up yet.

[kaos]

Any way... I'm just trying to improve the code i showed you on my first post:


<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('content').contentWindow.
document.body.scrollHeight;

//change the height of the iframe
document.getElementById('content').height=
the_height;
}
//-->

The problem is its getting bigger, but not smaller (except in IE).