scaling iFrame help

[Murgados]

I've got an iFrame I've set up, and I'd like to have it's height scale dynamically with whatever's loaded into it, so that there is no scrollbar on it. Does anyone know how I would do this?

Thanks,
Murgados

 

[ChrisHunt]

I don't think there's any way to do it in pure HTML, there might be a javascript approach that would work.

Are you sure you need to use an iframe at all? Could you not get the effect you're after with, say, SSI?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[tsdragon]

Try something like this. I haven't tested it, but it might work.

newHeight = document.body.offsetHeight
parent.document.getElementById('myFrame').style.height = newHeight;

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Murgados]

So, using tsdragon's method, would I place that into a function that ran everytime something was loaded into the iFrame?

 

[CliveC]

Perhaps you have considered this but, and I am assuming that the iframe would not be longer than the page (otherwise you would have to scroll anyway) if you made the iframe as long as the page and then made the background the same as the page, and made the frameborder zero, then you would acheive the same effect.

Wow! that was a long sentence!

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[Murgados]

Actually, I'm planning on loading pages into the iFrame, but still having the iFrame become the size of the pages. It could become smaller or larger than the page, but people would only have to use the scrollbar that their browser gives them. This way the navigation bar wouldn't have to reload each time someone goes to a new page, and I would only have to include the navigation code on one page, as opposed to 20 or so.

 

[ChrisHunt]

I suggest you use ordinary frames - which will give you the same advantages and disadvantages, albeit with a slightly different look - the nav bar won't scroll with the rest of the page (but arguably that's a good thing).

Alternatively (and better in my view) use server-side includes (SSI) to include the navigation stuff into each page. Admittedly visitors will have to reload the navigation HTML on each page (though they'll cache any images), but it's a pretty trivial overhead compared with the fact that search engines will be able to direct traffic to every page of your site, rather than just the top of your frameset. You can read more about SSIs in faq253-3309 and faq253-2000 .



-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[tsdragon]

Murgados: Ideally you would include that code in a function that you would call from the onLoad event of each page you load into the iframe. That's why it use the "parent" qualifier - so it can reference the iframe that encloses it. I think it would be difficult to do from the enclosing document unless you could find a way to determine when the new page you load into the iframe has finished loading.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Murgados]

tsdragon, I've used your method, and it's resizing the iFrame well, but for some reason it is resizing it to twice the size of the page being loaded into it. Any ideas why?

 

[tsdragon]

No, I've no idea why it would be doing that. Do you have an example url I can go to so I can see the problem?

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Murgados]

http://www.emptydoor.com/macwork/redes/index.html

 

[tsdragon]

For me it wasn't resizing at all. However, I think I found a solution: try using scrollHeight instead of offsetHeight. You might also want to add "px" to the height (and end it with a semicolon):

newHeight = document.body.scrollHeight + "px";

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.