PDA

View Full Version : iframe autofit height



ultron2099
01-22-2009, 05:04 PM
I'm using code to bring in pages of various heights but standard widths under a banner/menu. i want them to be displayed without scroll bars beyond standard on side of browser. for the most part i've found code that mostly works, however it does not re-adjust itself down in size after finding a page of larger height, ie the height grows but does not shrink. i'm looking for a way to modify the code so that it either resets height to 0 before fetching the actual height of the loading page or some other method of dynamically alterning the height page not only up but also back down. here is the code i borrowed and used.


//This part was put in the header

<script language="JavaScript">
<!--
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;
}
//-->



//this is in the main body. picture above a menu option that uses the below script to load the page into the iframe and then the above caclheight to adjust the height setting. only it just adjusts up, not back down.

<iframe name="the_iframe" onLoad="calcHeight();" scrolling="no" width="730" id="the_iframe" src="you_page.html" frameborder="0" allowtransparency="true"></iframe>

fobos
01-30-2009, 12:24 AM
ultron2099,
have you found a solution yet? if not, what browser are you using?

ultron2099
01-31-2009, 06:51 AM
ultron2099,
have you found a solution yet? if not, what browser are you using?



Still looking. I'm using Mozilla Firefox, but I would like to keep things as cross platform viable as possible. What I think I'm looking for is a way to have the value set to zero at the the start of the script. that way each page will be calculated freshly.

jscheuer1
02-01-2009, 02:23 AM
I've found that with the various DOCTYPEs available, and the various browser's quirkiness as regards the now deprecated iframe element, and the possibility that the external page's height may not be as accessible (due to its layout) as one would want for something like this, it is all but impossible to come up with a solution to this issue other than one that is customized to your external content (which ideally should be standardized in some ways), and that includes some browser/feature detection for the purpose of tweaking the height for a given browser or feature set found in certain browsers.

For some ideas, look here:

http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

and here:

http://www.dynamicdrive.com/forums/showthread.php?p=127384#post127384

neither of which, in my opinion are truly cross browser or applicable in all situations, but that contain enough coding ideas for any clever person familiar with javascript to work out the sort of custom solution I refer to at the beginning of this post.