How to fit the height of an iframe to its content?
I have an iframe on my menu.htm in which I show the .htm for the corresponing menuitem.
Now, I want to change the height of that iframe using javascript, so I added a behavior in Dreamweaver MX when a link in a menu is clicked to:
parent.document.getElementById("main").style.height = parent.document.getElementById("main").document.body.innerHTML.getBoundingClientRect()
where "main" is the id of the iframe.
I know that doesn't work, becuase getBoundingClientRect() returns a rect.
However, when I click the link in the menu, will the iframe will the iframe be filled with the corresponding .htm _before_ the javascript is called?
If so, how would I write to get it to work?
Thank you SOOO much if you help me out, cuase i'm going nuts, and i MEAN nuts, on searching google...
Abhishek Reddy posted this at 23:46 — 13th September 2003.
He has: 3,348 posts
Joined: Jul 2001
I've never used getBoundingClientRect() before. And I can't find it on w3.org. Other sources suggest it's IE-only, and innerHTML is also an MSIE invention. You may be heading down the wrong path right off the bat.
Enselic posted this at 07:50 — 14th September 2003.
He has: 18 posts
Joined: Sep 2003
..and that is not what I want.
Wouldn't it be possible to do it like this:
In every .htm file I have that can be viewed in the iframe one would add a func-call in . That function would first set the height of the ifreame to 0, then set the height to the height of the .hrm itself. If you would not set to 0 first, it would probably go wrong if you changed from a bigger .htm to a smaller.
So, how would a .htm get the height of itself?
Besides, isn't there any place where you can see an overview of all Javascript classes or something?
Abhishek Reddy posted this at 09:29 — 14th September 2003.
He has: 3,348 posts
Joined: Jul 2001
From W3 DOM Core:
ECMAScript language binding contains ECMAScript (Javascript) methods/functions.
A more detailed look is in the DOM level 2 specification.
http://www.xs4all.nl/~ppk/js is a great reference site.
http://www.webmaster.ee/javascript/js.html
I like this one too, but it helps if you know know a bit of Russian.
--------------
As for your script, try this:
<!-- this goes in the page containing the iframe -->
<script type="text/javascript">
function setFrameHeight(newHeight) {
document.getElementById("main").style.height=newHeight;
}
</script>
<!-- this goes in the page within the iframe -->
<body onload="parent.setFrameHeight(document.body.offsetHeight);">
This works for me on Moz Firebird 0.6.1/Linux. From the compatibility charts at http://www.xs4all.nl/~ppk/js/doctypes.html it should work on IE5/Mac, Moz, Opera, and IE6 with doctype set. IE5 and IE6 without doctype should theoretically not run the above, but the best way to check IE compatibility is to field-test it yourself.
Enselic posted this at 10:59 — 14th September 2003.
He has: 18 posts
Joined: Sep 2003
Wouldn't it be possible to only in the menu.htm have this script:
<script language="JavaScript" type="text/JavaScript"><!--
function setIframe( html_document )
{
document.all( 'main' ).src = html_document;
document.all( 'main' ).style.height = document.all( 'main' ).body.offsetHeight;
}
//-->
</script>
And then to call the func:
<a href="javascript:setIframe( 'downloads.htm' )">Downloads</a>This won't work in IE6 atleast. Isn't this OK?
Abhishek Reddy posted this at 12:04 — 14th September 2003.
He has: 3,348 posts
Joined: Jul 2001
Do you have a page online that I can look at?
Something like that should be possible. I haven't tried accessing offsetHeight from outside the frame...
Anyway, avoid document.all (this is more MSIE code). Use document.getElementById() instead, which is the W3C recommended standard.
document.body.offsetHeight should work in IE6 if a doctype is declared.
Enselic posted this at 12:19 — 14th September 2003.
He has: 18 posts
Joined: Sep 2003
ofcourse: www.enselic.tk
I guess I have not declared doctype... Is that hard?
Abhishek Reddy posted this at 12:52 — 14th September 2003.
He has: 3,348 posts
Joined: Jul 2001
Change
<script language="JavaScript" type="text/JavaScript"><!--
function setIframe( html_document )
{
document.getElementById( 'main' ).src = html_document;
document.getElementById( 'main' ).style.height = document.all( 'main' ).body.offsetHeight;
}
//-->
</script>
to
<script language="JavaScript" type="text/JavaScript">
<!--
function setIframe(html_document)
{
frames['main'].location.href = html_document;
setTimeout("100","sizeFrame()");
}
function sizeFrame() {
document.getElementById('main').style.height = frames['main'].document.body.offsetHeight;
}
//-->
</script>
It's ugly. I don't like it. I still recommend you look into other ways of fixing your menu, if at all that's necessary. But this should work...
As for doctype, read these two docs:
http://htmlhelp.com/tools/validator/doctype.html
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Enselic posted this at 13:43 — 14th September 2003.
He has: 18 posts
Joined: Sep 2003
I changed it to:
<script language="JavaScript" type="text/javascript">
<!--
function setIframe( html_document )
{
frames['main'].location.href = html_document;
setTimeout( "sizeFrame()", 1000 );
}
function sizeFrame()
{
document.getElementById('main').style.height = frames['main'].document.body.offsetHeight;
}
//-->
</script>
I changed it to 1000 to be safe, but it still didn't work.
Both IE and Firebird and Netscape makes the src-change correctly.
This is how my doctype is;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">It's driving me nuts. Please don't give up on me!
Thanks for the help so far.
Abhishek Reddy posted this at 07:18 — 15th September 2003.
He has: 3,348 posts
Joined: Jul 2001
Lemme just check again, you want the frame "main" to resize to match its contents? If that happens, you'll still get a scrollbar on the main frame, meaning you'd effectively be simulating a perfectly normal un-framed page.
What you have on enselic.tk appears to do the above -- is that what you want?
If you're not trying to "fix" the menu, then I'm guessing you just want to have one menu file to have to update to make changes? Look into SSI or PHP includes to do just that, but more effectively. Frames are terribly unkind on my mouse scroll button.
I hope I'm seeing this right...
Not to worry, I'm not about to that (just yet).
Enselic posted this at 19:54 — 15th September 2003.
He has: 18 posts
Joined: Sep 2003
The reason why the site works is cause I managed to solve it! (And it works in both IE6 and NN7!)
Just view the source if you wanna know how. Thanks for your help!
Btw, do you have any experience with GoDaddy? I'm going to register enselicscorner.com some day so I'm scouting for a host.
Abhishek Reddy posted this at 20:29 — 15th September 2003.
He has: 3,348 posts
Joined: Jul 2001
Heh, well done.
But pardon me, I don't see what it achieves... like I said earlier, the frames simulate a normal page. Is it just the benefit of editing one nav that you wanted? 
Yep, I use GoDaddy for the one domain I have. I highly recommend their domain reg service (I don't use their hosting). You might wanna start a topic down in Hosting and Domain, though.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.