PDA

Click to See Complete Forum and Search --> : Dynamically resizing Iframes

davebeseke
11-12-2005, 01:52 PM
I am having a problem with a website that uses Iframes. Here is what I am trying to do:

1. The Iframe height must be able to be dynamically resized to fit the contents. We do not want to have a situation where we end up with a scrollbar on the Iframe and a scrollbar on the browser.

2. The height required for the content pages will change based on which page we are loading into the Iframe. It may become shorter or longer. The page that contains the Iframe has some additional contents under the Iframe. We want those contents to appear immediately under the Iframe without any gap between the bottom of the Iframe and the top of the outer page's content.

3. The pages displayed inside the content may be from the same domain as the container page, or they may be loaded from a completely different domain. The user will be clicking on navigational links within the content inside the Iframe that may cause pages to load from other domains as well. The behavior of the Iframe must remain consistent in either case.

Here is an example of how we are currently constructing the page (***DYNAMIC CONTENT*** is the page that we swap):

Main page:

<html>
<BODY>
<table border="0" width="100%" cellspacing="0">
<tr>
<td width="15%" align="left" bgcolor="#F1F1F1">content</td>
<td width="85%" align="right" valign="bottom">content</td>
</tr>
<tr>
<td width="15%" valign="top"><iframe src="xxxx" frameborder="0" width="100%"></iframe></td>
<td width="85%" valign="top" align="left"><iframe src="***DYNAMIC CONTENT***" frameborder="0" width="100%"></iframe></td>
</tr>
<tr height="75">
<td width="15%">bottom content</td>
<td width="85%">bottom content</td>
</tr>
</table>
</body>
</html>

***DYNAMIC CONTENT*** may be replaced by another URL from the same domain as the main page or it may be a URL to a page in another domain.

Any help would be greatly appreciated.
kelly23
11-12-2005, 02:10 PM
Have you tried style="height: 100%" for the td with your dynamic content?

kelly
Mr J
11-12-2005, 02:42 PM
Take a look here for a working example

www.huntingground.freeserve.co.uk/webplus/iframes/iframe_resize.htm
davebeseke
11-13-2005, 08:22 AM
The height=100% was the 1st thing I tried - it did not help. When you do that and you use the scrolling=no parameter, the parameter blocks the Iframe scrollbar but the browser does not pick up on the fact that the actual size of what it's displaying requires a scrollbar on the browser window.
kelly23
11-13-2005, 08:25 AM
The height=100% was the 1st thing I tried - it did not help.

Hmmm, worked when I tried it. I'll have to take another look at what might have been different on mine.
kelly23
11-13-2005, 08:27 AM
Where do you have scrolling = no? I don't see it in your code.
davebeseke
11-13-2005, 08:49 AM
The example posted on the HuntingGround website does not seem to work in our case. The problem is that once the page is loaded, the user can click links within the Iframe content or submit forms within the Iframe content that load new content within the Iframe without reloading the page. Is there a way to get that Javascript routine to fire whenever new content is loaded in the Iframe other than changing every link or post on all the different pages that might get displayed inside the Iframe? If so, I think this will work, I'm just not familiar enough with calling Javascript routines to be able to figure out a way to do it.
davebeseke
11-13-2005, 08:50 AM
Sorry about that - the version of the code I posted dropped that parameter when I was trying other solutions and I didn't catch that when I posted it here.
Mr J
11-13-2005, 09:09 AM
Please try the example files in the attached zip file, I just tried these in IE, Mozilla. Firefox, and NS7 and the iframe resized using links in the parent and from links in the page in the iframe?
kelly23
11-13-2005, 09:15 AM
How about using an include file for the dynamic content? It will fit in more seamlessly.
davebeseke
11-13-2005, 04:57 PM
Thanks to everyone that has helped with this problem. It looks like the solution posted by Mr. J should work. I've sent this on to some of my coworkers that are involved in the project. Unless there's some odd reason why content from other domains would work differently that content from the originating domain, I don't see a reason this solution would not work.
davebeseke
11-13-2005, 06:02 PM
Mr J - I attempted to integrate the solution into the project website and it did not work. I think the problem has something to do with the content inside the Iframe being loaded from a different domain. When we do the first content load, the frame correctly resizes. The second content load is done via a Response.Redirect - that one does not resize.
davebeseke
11-13-2005, 06:49 PM
Mr J - I also attempted to click on some of the links in the resized content of the Iframe to see if those would trigger another resizing - they did not. If you feel it would help to see the problem on our website, send an email to me at david.beseke@sbcglobal.net and I'll send instructions on how to access our site.