•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 423,539 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,277 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 5086 | Replies: 15 | Solved
 |
•
•
Join Date: Dec 2005
Posts: 11
Reputation: 
Rep Power: 3
Solved Threads: 0
Newbie Poster
iframe Height adjustment to loaded content, help please? 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
One of the pages
Help is very appreciated
Regards
Solway
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
Regards Solway
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
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".
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> •
•
Join Date: Dec 2005
Posts: 11
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
Re: iframe Height adjustment to loaded content, help please? 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:
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">© 2007 bla - Created by Solway </span>
</div>
</div>
</div>
</body>
</html> Last edited by solway : Dec 12th, 2007 at 5:42 am. Reason: spelling
Regards Solway
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
Most likely FF is just not forgiving you for your careless Markup. For example:
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.
<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.
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
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.
•
•
Join Date: Dec 2005
Posts: 11
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
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?
whats your suggestion for the markup?
what does it do, set the standard?
Regards Solway
•
•
Join Date: Dec 2005
Posts: 11
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
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
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
Regards Solway
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
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/netw...ype/index.html
http://www.456bereastreet.com/archiv...ctypes_please/
http://www.quirksmode.org/css/quirksmode.html
http://developer.mozilla.org/en/docs...ndards%22_Mode
http://www.zvon.org/xxl/xhtmlReferen...omparison.html
http://www.blackwidows.co.uk/resourc...comparison.php
http://www.456bereastreet.com/archiv...rict_doctypes/
]http://www.oreillynet.com/pub/a/netw...ype/index.html
http://www.456bereastreet.com/archiv...ctypes_please/
http://www.quirksmode.org/css/quirksmode.html
http://developer.mozilla.org/en/docs...ndards%22_Mode
http://www.zvon.org/xxl/xhtmlReferen...omparison.html
http://www.blackwidows.co.uk/resourc...comparison.php
http://www.456bereastreet.com/archiv...rict_doctypes/
•
•
Join Date: Dec 2005
Posts: 11
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
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
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
Regards Solway
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
>>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:
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:
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).
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);
<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).
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
•
•
•
•
adult ajax asp content cross-browser javascript menu with few lines of code developer development firefox home html internet javascript javascript smooth scrolling scroll smoothly window document position javascript tab menu with rounded corners generator microsoft mobile msdn news nokia office playready prevent javascript menu from getting hidden under flash movies site software sql vista web
- Previous Thread: Function is undefined
- Next Thread: drop down menu problem
