oddball HTML question about iFrames

Kaido · Oct 14, 2005

I'm using an iFrame in the site I'm working on to display content. I have a Flash header with buttons above the iFrame which I use for navigation of the iFrame. It works great. However, I want to have the iFrame dynamically resize to fit the height of whatever the content page is. Right now, when you click on a link in the Flash header, it will open the appropriate iFrame content page, but then the iFrame will get a scrollbar. I don't want the scrollbar in the iFrame; I want the scrollbar on the main page. So, when you click a link on a Flash navigation button, I want it to open the content in the iFrame and then have the iFrame automatically resize to fit the content.

I've been doing a lot of googling and testing out various code chunks to make this work. I'm using HTML/XHTML, JavaScript, and CSS. This thread has had the best results so far, which means it works for one click in Firefox and not at all in Internet Explorer. Is there a reliable way to have iFrames dynamically resize themselves to fit their content?

Cliff's:
1. I use an iFrame on my site
2. I want the iFrame to automatically resize to fit the content
3. How do I do this?

Kaido · Oct 14, 2005

Here's another decent attempt, but it only works with IE5+ or better. This is for a business site and I need to support IE4+. Any ideas for a more compatible solution? I can post my existing code if you want to look at it.

hellman69 · Oct 14, 2005

Well, here's what I did that works on every browser, and seems a lot simpler than the examples you have been working on.

Trevor

Kaido · Oct 14, 2005

hellman69, I tried that, but no luck. Here's my current code, which works in Internet Explorer and Opera, but not Firefox or Netscape:

<html>
<head>


<script type="text/javascript">
window.onload = function() {
var f = document.getElementById("content");
function resize() {
var h = "";
if (f.contentDocument) {
h = f.contentDocument.documentElement.offsetHeight + 20 + "px";

} else if (f.contentWindow) {
h = f.contentWindow.document.body.scrollHeight + 5 + "px";
} else {
return;
}
f.setAttribute("height",h);
f.parentNode.setAttribute("height",h);
}
if (window.addEventListener) {
f.onload = resize;
} else if (f.attachEvent) {
f.attachEvent("onload", resize);
} else {
return;
}
resize();
}
</script>

</head>

<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0" bgcolor="CCCCCC">


<table
cellpadding="0" cellspacing="0" border="0"
align="center" width="653">


<tr height="114px">
<td bgcolor="EBEBEB" valign="top">
<object lassid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shoc...abs/flash/swflash.cab#version=6,0,29,0"
width="653" height="114">
<param name="movie" value="home/header4.swf">
<param name="quality" value="high">
<embed src="home/header4.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="653" height="114"></embed>
</object>
</td>
</tr>


<tr>
<td>
<iframe
src="home/home.html"
name="content"
id="content"
scrolling="no"
width="653"
frameborder="0"
>Hidden Text
</iframe>
</td>
</tr>


<tr>
<td valign="top" width="653" height="70" background="footer.gif" style="background-repeat:no-repeat ">
[footer programming goes here]
</td>
</tr>

</table>

</body>
</html>

Modeps · Oct 14, 2005

Allow me to play devil's advocate for a second. Why not use Divs and AJAX? in my experience, iframes are just an ipain.

Kaido · Oct 14, 2005

Originally posted by: Modeps
Allow me to play devil's advocate for a second. Why not use Divs and AJAX? in my experience, iframes are just an ipain.

Because I know about 15 commands in HTML lol. I tried it the Div way the first time, with no success. However, I'm not very knowledgable. The guy we hired to do the website fell through and was booted off the project, so I'm working on it with one of our engineers. I haven't done web programming for awhile and I'm really out of touch. An iFrame just seems like the easiest way to do it. If you have another coding, suggestion, please let me know.

Here's what I'm trying to do: I want to be able to put a seperate page within a main page and have the main page automatically resize the seperate page to fit fully height-wise. My solution to this was to create a table with three rows, put the nav in the first row, the iFrame for the seperate page in the second row, and the footer in the third row. Then, when you use the first row's nav links, it opens up the content in the second iFrame row and automatically resizes the iFrame to fit the full content length on the page. This makes it so that the page doesn't have to reload every time you click on a link, and also makes it so you only have to download the Flash header once. Many of our users are on a 56k line, which is part of the reason I wanted to do it this way. If you have a better idea, by all means, please let me know

hellman69 · Oct 14, 2005

Well, I was messing around with your javascript and I got it to work in IE, Opera, and Mozilla. However, it's not all the different from what you had. The code you have is pretty solid. What version of Netscape do you have that's giving you problems?

Trevor

Kaido · Oct 17, 2005

hellman69, thank you for the code. I tested it in all four browsers and I'm getting the same problem - it works great in Internet Explorer and Opera, but keeps dropping the footer further down with each nav link click in Firefox and Netscape. System specs as follows:

Windows XP Home SP2
Internet Explorer 6
Firefox 1.0.7
Opera 8.5 (build 7700)
Netscape 8.0.3.3

All updated to the latest builds and releases. I uploaded a test file on one of my servers:

http://www.wiredbynature.org/temp/test.html

This would be equivalent to the index.html that would load when you first enter the site. It's designed to be the frame or template that the rest of the site is viewed through. The iFrame that loads by default is "load.html" in the "main" sub-folder. The links in the header include that file, "file1.html" in the "folder1" sub-folder, and "file2.html" in the "folder2" sub-folder.

The new code works fantastic in Internet Explorer and Opera, same as the other code in previous posts. However, the iFrame window doesn't resize the physical frame on the page in Firefox and Netscape. As you continually click on links in Firefox and Netscape, the footer drops further and further down the page. It's a strange problem. I don't know enough JavaScript to remendy this quickly, so if you have any ideas, they would be more than welcome.

My alternatives include:
1. Create two regular frames and put the Flash header in the top frame and the content in the bottom frame.
2. Use the current code, but eliminate the footer and third table cell. Then, attach the footer to each content page so that it won't matter how far down the iFrame drops down.

I'd rather not use those two options. 100% browser cross-compatibility = big headache

Kaido · Oct 17, 2005

I suppose one way around it would be to have the page reload when you click a link. That kind of defeats the purpose of having a main template page that you can view content through the iFrame though.

Kaido · Oct 17, 2005

Well, this guy's code works. I guess I need to learn the div tag and css and all those other goodies :disgust:

hellman69 · Oct 17, 2005

I got it too work. What you need to do is add the following line in the resize function (after var h = ""

. Add this, "f.setAttribute("height",100);". Now you can change 100 to whatever, but that will provide you with the minimum height for a page. If it's longer, the page will now resize.

Trevor

Search

oddball HTML question about iFrames

Kaido

Elite Member & Kitchen Overlord

Kaido

Elite Member & Kitchen Overlord

hellman69

Member

Kaido

Elite Member & Kitchen Overlord

Modeps

Lifer

Kaido

Elite Member & Kitchen Overlord

hellman69

Member

Kaido

Elite Member & Kitchen Overlord

Kaido

Elite Member & Kitchen Overlord

Kaido

Elite Member & Kitchen Overlord

hellman69

Member

TRENDING THREADS