Resizing iframe based on src size

[Miraenda]

I am trying to figure out how to make my iframe content resize to the size of the src file. My site has a top navigational bar that has links which load into the iframe below the bar. The iframe is named intro, and its original source is my introductory message. So, the code I have right now for the iframe is:

<iframe name="intro" src="intro.htm" width="100%" height="700px" scrolling="auto" frameborder="0">

<a name="intro" id="intro" href="intro.htm">
Click here if you have an old browser</a>

</iframe>

Then an example link on the nav bar is

<a href="Flowers/Flowers1.htm" target="intro"><img src="Flowers/Flower.gif" /></a>

Unfortunately, my linked pages that would reload in the iframe have different heights (the width of 100% is fine). I would prefer not to have to use scrolling to see all the content in the iframe, especially since my introduction is much smaller than the other linked content areas. It seems to me that javascript should be able to do this somehow, but I can't find any code on this issue. Additionally, I am very inexperienced in javascript and have no idea how to do it myself.

I am hoping that someone in this forum will be able to help me.

Thanks

[tedster]

I know we've pulled this issue apart before here, but I can't locate the thread.

From what I remember, the crux of the challenge is that the browser must first actually RENDER the iframe content to get a reading of the content's height, running after the onLoad event fires.

After you get the new height variable for the iframe, then the script needs to RE-draw the page having already rendered it once. That's a bit messy and disorienting for the visitor.

The object that javascript needs to read to carry out this readrawing is document.body.scrollHeight for the content loaded in the iframe. I'm pretty sure that's not standard, but IE only and perhaps recent Netscape/Moz/Opera. The same object was named document.body.offsetheight in IE5 Mac and older Opera.

In fact -- here's a thread [webmasterworld.com] where a similar measurement was attempted for slightly different purposes, but it remains an unresolved issue.

Has anyone else played with this territory?

[Miraenda]

Thanks Tedster for responding. I would like to ask why the browser needs to render the iframe .html source first? It seems that if I preloaded the source somehow (like images can be preloaded), then there should be a way to detect the size of the preloaded source before displaying it.

As I mentioned initially, however, I am very unfamiliar with JavaScript itself, so I could be way off-base as to what abilities it has to preload an .htm page for size determination prior to rendering.

I imagine that someone out there has an answer or a way to do it, since I have been very impressed since joining WebmasterWorld with the depth of information and abilities of the members.

Thanks

[tedster]

You never know the exact size of a text block until it's rendered.

People can over-rule your CSS with their own, different browsers and different OS use slightly different variations of standard fonts which means each local machine gets a slightly different rendering. It may even be a few lines longer because the line breaks come in slightly different places.

You can see this by comparing the same page in Netscape and Explorer, especially when the width of a text line is relatively narrow.

There are ways to preload the raw text itself. But until that text has been formatted, in place and inside the iframe on the client machine, you can't know the exact length of the document in pixels because that number doesn't "exist" and cannot be an object for javascript to access.

An image is a fixed size -- a different beast altogether from text -- and that makes preloading images a more practical matter.

[Miraenda]

Again, thanks Tedster for responding. I understand now why the text block needs to be rendered prior to resizing. However, couldn't the new source be rendered as hidden initially, resized, then after the resizing made visible? This would mean that the viewer wouldn't be as disoriented (although resizing the iframe itself will be a little disorienting), but it would take longer for the new iframe to load. And, I am sorry if I am trying to whip a dead horse on this topic as I am just trying to understand what I should be looking for in order to solve this problem on my website.

Thanks
Mira

[Dr_Jive]

Hello, this may not be helpful or what you are looking for, but couldn't you just detect the user's available screen size, and size the iframe height accordingly (deducting the height of the nav bar)?

This way, the user will have to scroll anyway if the iframe contents do not fit the screen. So why not let them scroll within the iframe, and keep your nav bar on top.

just a thought, dr_jive

[ShawnR]

"...couldn't the new source be rendered as hidden initially..."

Yes, I don't see why not. Try it. But note that I don't think it will be that disorientating for the viewer. Many pages re-adjust positioning or sizing as they are loading (although most not using Javascript). For example, microsoft's home page does a bit of a two-step when the image for the advert shows.

"...how to make my iframe content resize to the size of the src file..."

The replies have been taking into account the user's screen resolution, but if you are just interested in the size of your source, how about doing this on the server side in perl or php.

Shawn