iframe Height adjustment to loaded content, help please?

Question

solway 0 Newbie Poster

17 Years Ago

Hi guys

First time posting here. Have been enjoying all the resources available to us, very helpful.

My problem:

Recently started learning css / java - i have a web page with an iframe on the index pages within a div tag, which then loads all other pages into this iframe.

The thing is i require the iframe to adjust its height size according to the content loaded.

After lots of searching a have come across only one that worked for me, however it only seems to work in IE and not firefox and the like.

Here's my striped down version of the code.

can someone help? or rewritten it using a better method?

In Index page

<head>
<script language="JavaScript">
<!--

function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('the_iframe').contentWindow.
      document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('the_iframe').height=
      the_height;
}
//-->
</script>


<style type="text/css">
<!--
body {
	background-color: #627CE6;
}

.style1 {color: #999999}
-->
</style>
</head>
<body>
    <div class="centerall" id="masthead">
         <div id="globalNav"></div>
            <div id="sectionLinks"> 
                <a href="pages/home.html" target="the_iframe">Home</a >
                <a href="pages/team.html"aboutus.html" target="the_iframe">The Team</a>
                <a href="pages/Projects.html"projects.html" target="the_iframe">Projects</a>
                <a href="pages/services.html" target="the_iframe">Services</a>
                <a href="pages/Contact.html" target="the_iframe">Contact Us</a>
            </div>
        <div id="content">
          <div id="iframe">
            <iframe name="the_iframe" onload="calcHeight();" src="pages/home.html"  
              width="800" height="500" scrolling="no" allowtransparency="true" 
              frameborder="0"> If you can see this, your browser doesn't understand iFRAME 
              technology. Please make sure your browser is up to date.<br />
              Refer to this<a href="pages/help.html" target="blank"> Help Page </a> for more
              details. </iframe>
            </div>
          <div id="siteInfo"> Bla Bla </div>
        </div>
      </div>
</body>
</html>

One of the pages

<bodycontent>
<div id="Homepage">
  bla bla
</div>

Help is very appreciated

Regards
Solway

javascript

4 Contributors
16 Replies
280 Views
2 Years Discussion Span
Latest Post 15 Years Ago Latest Post by Gianni^^

hielo 65 Veteran Poster

17 Years Ago

I modified the code above slightly and works bor both, IE and FF. If the problem persists, it could be a browser version issue (as opposed to the browser family). Notice that instead of using document.getElementById, I am passing a reference to the object directly. This way you can reuse your function for just about any iframe, regardless of what id you assign to it.

Lastly, the default height and id will be used in case of an error. Typical scenario would be if the page that loads on the iframe is not from your domain. The try-catch is for the page to load up "silently".

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe Height</title>
	<style type="text/css"><!--
	#testFrame{border:0;}
	--></style>

</head>
<body>
<script type="text/javascript"><!--
function calcHeight(elem)
{
	//find the height of the internal page
	var the_height=500;
	var padding=30;//to avoid the scroll bar
	try
	{
		if( elem.contentWindow && elem.contentWindow.document)
		{
			the_height=elem.contentWindow.document.body.scrollHeight;
		}
	}
	catch(e){}
	//change the height of the iframe
	elem.height=the_height +padding;
}
//--></script>
<iframe id="testFrame" onload="calcHeight(this)" src="test1.html"></iframe>
</body>
</html>

hielo 65 Veteran Poster

17 Years Ago

Most likely FF is just not forgiving you for your careless Markup. For example:

<a href="pages/home.html" target="the_iframe">Home</a >
                <a href="pages/team.html"aboutus.html" target="the_iframe">The Team</a>
                <a href="pages/Projects.html"projects.html" target="the_iframe">Projects</a>
                <a href="pages/services.html" target="the_iframe">Services</a>
                <a href="pages/Contact.html" target="the_iframe">Contact Us</a>

Pay close attention to the href value on "The Team" and "Projects". You have two web addresses back to back AND incorrectly enclosed.

My recommendation: You need to start getting into the habit if using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and validate your markup on w3c's validator. If you are doing things right, it should report no errors on your markup. Basically, if no errors are reported there is very little chance that you will "confuse" any standards compliant browser.

hielo 65 Veteran Poster

17 Years Ago

BTW: I did try your code with two local files and it worked for me on both. That's why I am convince the issue is your invalid markup. Make sure your markup is correct on all pages, not just the one containing the iframe.

hielo 65 Veteran Poster

17 Years Ago

Since you asked, you are probably interested (as oppoed to just curious) about the subject. Here are some resources on the subject [You don't have to read them all at once :) ]

http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/index.html

http://www.456bereastreet.com/archive/200609/no_more_transitional_doctypes_please/

http://www.quirksmode.org/css/quirksmode.html

http://developer.mozilla.org/en/docs/Gecko%27s_%22Almost_Standards%22_Mode

http://www.zvon.org/xxl/xhtmlReference/Output/comparison.html

http://www.blackwidows.co.uk/resources/tutorials/xhtml/attribute-comparison.php

http://www.456bereastreet.com/archive/200606/why_is_the_style_attribute_allowed_in_strict_doctypes/

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

solway 0 Newbie Poster · Answer 1 · 2007-12-12T16:17:41+00:00

thanks hielo, your code seems to work on its own (new blank html).

However, i can't seem to incorporate it into my code.
When i incorporated it in, it seems to only work in IE and not FF. unless i missed something.

In FF the iframe goes to a thin bar and wil not resize.

In Opera the iframe will resize to the page loaded within, however does not resize back, i.e small to large resizes ok, but large to small retain the large page's size.

Safari i havn't tried yet.

Can you please help?

My code (with your changes) is the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2007. All rights reserved. -->
<title>blablabla</title>
<link rel="stylesheet" href="css/3col_leftNav.css" type="text/css" />

<style type="text/css">
<!--
body {
	background-color: #627CE6;
}
#the_iframe{border:0;}
.style1 {color: #999999}
-->
</style>
</head>
<body>

<script type="text/javascript"><!--
function calcHeight(elem)
{
	//find the height of the internal page
	var the_height=500;
	var padding=30;//to avoid the scroll bar
	try
	{
		if( elem.contentWindow && elem.contentWindow.document)
		{
			the_height=elem.contentWindow.document.body.scrollHeight;
		}
	}
	catch(e){}
	//change the height of the iframe
	elem.height=the_height +padding;
}
//--></script>

    <div class="centerall" id="masthead">
    <div>
          <h1 id="siteName"><img src="images/banner-construct.jpg" width="800" height="235" /></h1>
      </div>
        <div id="globalNav"></div>
            <div id="sectionLinks"> 
                <a href="pages/home.html" target="the_iframe">Home</a >
                <a href="pages/team.html"aboutus.html" target="the_iframe">The Team</a>
                <a href="pages/Projects.html"projects.html" target="the_iframe">Projects</a>
                <a href="pages/services.html" target="the_iframe">Services</a>
                <a href="pages/Contact.html" target="the_iframe">Contact Us</a>             </div>
<div id="content">
  <div id="iframe">
  <iframe name="the_iframe" onload="calcHeight(this);" src="pages/home.html" width="800" scrolling="no" allowtransparency="true" frameborder="0"> If you can see this, your browser doesn't understand iFRAME technology. Please make sure your browser is up to date.<br />
Refer to this<a href="pages/help.html" target="blank"> Help Page </a> for more details. </iframe>
</div>
<div id="siteInfo">
                        <a3 href="pages/team.html" target="the_iframe">The Team</a3> ||
                        <a3 href="pages/Policy.html">Privacy Policy</a3> || 
                        <a3 href="pages/Contact.html" target="the_iframe">Contact Us</a3> || 
                        <a3 href="pages/Help.html" target="the_iframe">Website Help Page</a3> ||  
                        <span class="style1">&copy; 2007 bla - Created by Solway </span>
                        </div>
            </div>
</div>
</body>
</html>

solway 0 Newbie Poster · Answer 2 · 2007-12-13T01:46:56+00:00

I wondered what that "markup" was, it came from a dreamweaver template

whats your suggestion for the markup?
what does it do, set the standard?

solway 0 Newbie Poster · Answer 3 · 2007-12-13T03:15:23+00:00

just did a clean up on the code, only errors reporting are:

Line 58, Column 35: there is no attribute "onload".
Line 58, Column 131: there is no attribute "allowtransparency". but works fine

is my markup the best to use?

will try your code tomorrow

solway 0 Newbie Poster · Answer 4 · 2007-12-16T02:01:36+00:00

hi hielo

just updated all my pages, so they preform to W3.org standards

i then added your code, however:

IE7 = it works
Firefox = doesn't resize the iframe at all
Opera = resizes to the largest page, but does not resize back to smaller pages.
Safari = resizes to the largest page, but does not resize back to smaller pages.

what have i done wrong?
resize code needs adjustment?

heres a test version of the webpage

http://www.solwayuk.adsl24.co.uk/ecatest/index.html

hielo 65 Veteran Poster · Answer 5 · 2007-12-17T06:28:08+00:00

>>Firefox = doesn't resize the iframe at all
This is not true, it does. At least it does in mine, but it changes only by a few pixels (10 or 15 maybe) that it is hardly noticeable.

The only way to know if the javascript function is truly working is if you alter your code as follows:

the_height=elem.contentWindow.document.body.scrollHeight;
alert(the_height);

if the reported height is significant (more than 10 or 15) then the problem is else where. I copied you index.html page, and after viewing it via FF, what you have does work as in IE. Meaning it resizes appropriately, not just an insignificant 10 or 15 pixels. However, on my copy of your test page, I am not importing your css file anywhere:

<link rel="stylesheet" href="css/3col_leftNav.css" type="text/css" />

Repeat: I did not use/copy that css file at all AND the code works as expected. Hence, I thought I should begin looking there. I don't know what those css definitions are doing but after copying the file and adjusting the <link href=""> to point to my copy of your CSS file only on index.html, I noticed that it worked as expected on both IE and FF.

I then adjusted the CSS path (<link href="">) on the iframe target pages (home.html, etc), and wham. Problem replicated.

Solution: on the iframe pages, do not import the css file. Since index.html already does so, the css style definitions should propogate to your iframe files since they are all in the same domain.

All in all: 10 minutes to download all the files to replicate your site. 1 minute 47 seconds to fix it (and apparently, an eternity to write this explanation).

solway 0 Newbie Poster · Answer 6 · 2007-12-18T18:43:42+00:00

thanks hielo for all your help

adjusted the css file a bit. must of been the dreamweaver css template causing the problem.

test page updated:
http://www.solwayuk.adsl24.co.uk/ecatest/index.html

only thing is the opera and safari browsers not resizing to smaller content after a large content page.
Or is it me again?

Regards
Solway

solway 0 Newbie Poster · Answer 7 · 2007-12-18T19:49:55+00:00

PS.

Having taken out the css linking in all content pages, how do i get my div layout back?

because the content pages are not using the index page css link. and if i put any css styles into the content page, the iframe will close up again on FF.

hielo 65 Veteran Poster · Answer 8 · 2007-12-19T01:24:11+00:00

If you insist with the iframes, you may want to look at the following suggestions:
http://www.google.com/search?q=auto-resize+an+iframe&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

Also, I don't know what you mean by "..get my div layout back?".

Personally, I would rethink my strategy and use server-side includes. Iframes as too problematic. Think longterm maintenance. Do you want to be running into these unexpected problems every time you update your content? I wouldn't.
Good Luck.

solway 0 Newbie Poster · Answer 9 · 2007-12-19T19:03:38+00:00

thanks for the link, but have tried most without success. your code seems to work better. i think i'll search for an alterative to the iframe.

MidiMagic 579 Nearly a Senior Poster · Answer 10 · 2007-12-23T02:23:30+00:00

Many browsers leave an object that has had a content change at the largest size the object has needed to be so far, to avoid having to change it again. They also don't like to do unnecessary work.

solway 0 Newbie Poster · Answer 11 · 2007-12-24T23:01:59+00:00

thank for all your help guys, decided to use "server-side includes"
just put the website up, but still tweaking http://ww.eca-qs.com

Gianni^^ 0 Newbie Poster · Answer 12 · 2009-12-19T19:59:02+00:00

who thank man do you think the same thing is posible for the width ?
ive got a custom scrollbar aplied to my content containing a iframe ?