•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 422,832 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 3,309 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 HTML and CSS advertiser: Lunarpages Web Hosting
Views: 5183 | Replies: 8
![]() |
•
•
Join Date: Aug 2006
Posts: 40
Reputation:
Rep Power: 0
Solved Threads: 1
I have this code that won't display the iframe properly. When I use it, the iframe spans accross the page, but won't span down, fitting the entire page.
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>WinBetaSecrets- Connecting the Beta Community</title> <style type="text/css"> <!-- body { background-image: url(http://www.winvistasecrets.com/netwo...es/body-bg.jpg); background-repeat: no-repeat; } .style3 { color: #FFFFFF; font-size: 18px; font-weight: bold; } --> </style></head> <body> <div align="center"><a href="<A href="http://www.winvistasecrets.com/network"><img">http://www.winvistasecrets.com/network"><img src="http://www.winvistasecrets.com/netwo...mages/logo.png" alt="logo" width="584" height="109" border="0" /></a></div> <p align="left"> </p> <div style="height:100%; width:100%;"> <iframe src="http://thevistageeks.com/forums/index.php?act=idx" height="100%" width="100%" frameborder="0" scrolling="yes"> </iframe> </div> </body> </html>
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 954
Reputation:
Rep Power: 5
Solved Threads: 48
100% height doesn't really mean anything in standards compatible mode... (XHTML Transitional is one of those modes).. It means 100% of the parent object height... So if the parent object ( a body element) has no height (the height of a body element is usually the height of its contents), then the height of the iframe will be the default iframe height, which then occupies 100% of the body element's height... you could try setting the body height to 100% (i.e. <body style="height:100%;">).. I've heard that can work in some cases, but it seems a bit nonsensical...
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Dec 2006
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
I am having the same problem. One of the solutions posted previously had the following info, however I was not able to figure it out. I tried the following code, but still does not work. Am I calling the function wrong?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0;}
</style>
<script type="text/javascript">
function resize_iFrames(){
for (var i=0; i<sTitleArray.length; i++){
siFrameID = "iFrame" + sTitleArray[i];
//DHTML (used to get DIV inside of iFrame)
var oDHTMLiFrame = document.frames[siFrameID];
var oDHTMLiFrameDocument = oDHTMLiFrame.document
// DOM (used to set height of iFrame on this page)
var oDOMiFrame = document.getElementById(siFrameID);
var oDOMiFrameDocument = oDOMiFrame.document
// wait til document's data is completely loaded then resize iFrame surrounding it
while (oDHTMLiFrameDocument.readyState != "complete" ) {}
var oDIVwholePage = oDHTMLiFrameDocument.all['DIVwholePage']; // dhtml object model
// You can NOT get oDIVwholePage using DOM. That is, you can't get it using oDOMiFrameDocument.getElementById('DIVwholePage').
// MUST use DHTML model to GET the DIV inside the document inside the iFrame::: oDHTMLiFrame.window.document.all['DIVwholePage']
// MUST use DOM model to set the height of the iFrame!!! DHTML does not let me set height
oDOMiFrame.height = oDIVwholePage.offsetHeight+20;
}
}
</script>
</head>
<body>
<h1>Careers</h1>
<p>
< <a href="javascript:history.back();">back</a></p>
<IFRAME name=Original id=Original frameborder=1 src='http://www.recruitingcenter.net/clients/sybron/publicjobs/' onLoad='resize_iFrames()'> </IFRAME>
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0;}
</style>
<script type="text/javascript">
function resize_iFrames(){
for (var i=0; i<sTitleArray.length; i++){
siFrameID = "iFrame" + sTitleArray[i];
//DHTML (used to get DIV inside of iFrame)
var oDHTMLiFrame = document.frames[siFrameID];
var oDHTMLiFrameDocument = oDHTMLiFrame.document
// DOM (used to set height of iFrame on this page)
var oDOMiFrame = document.getElementById(siFrameID);
var oDOMiFrameDocument = oDOMiFrame.document
// wait til document's data is completely loaded then resize iFrame surrounding it
while (oDHTMLiFrameDocument.readyState != "complete" ) {}
var oDIVwholePage = oDHTMLiFrameDocument.all['DIVwholePage']; // dhtml object model
// You can NOT get oDIVwholePage using DOM. That is, you can't get it using oDOMiFrameDocument.getElementById('DIVwholePage').
// MUST use DHTML model to GET the DIV inside the document inside the iFrame::: oDHTMLiFrame.window.document.all['DIVwholePage']
// MUST use DOM model to set the height of the iFrame!!! DHTML does not let me set height
oDOMiFrame.height = oDIVwholePage.offsetHeight+20;
}
}
</script>
</head>
<body>
<h1>Careers</h1>
<p>
< <a href="javascript:history.back();">back</a></p>
<IFRAME name=Original id=Original frameborder=1 src='http://www.recruitingcenter.net/clients/sybron/publicjobs/' onLoad='resize_iFrames()'> </IFRAME>
</body>
</html>
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 954
Reputation:
Rep Power: 5
Solved Threads: 48
erm... that script seems to work based on a naming convention.. it's searching for iframes thta have IDs like "iFrame_[name]", where [name] is a value in an array called sTitleArray...
if you only have one iframe change the javascript code to:
(remove the greyed out parts, change the ID to the ID of your frame.
That code also seems to resize the iFrame relative to its contents... you may want to change the section in blue to:
you may want to check out the table halfway down this page to find out which "height" you want...
http://www.quirksmode.org/js/doctypes.html
if you only have one iframe change the javascript code to:
function resize_iFrames(){
for (var i=0; i<sTitleArray.length; i++){
siFrameID = "Your iframe id"
// DOM (used to set height of iFrame on this page)
var oDOMiFrame = document.getElementById(siFrameID);
//DHTML (used to get DIV inside of iFrame)
var oDHTMLiFrame = document.frames[siFrameID];
var oDHTMLiFrameDocument = oDHTMLiFrame.document
var oDOMiFrameDocument = oDOMiFrame.document
// wait til document's data is completely loaded then resize iFrame surrounding it
while (oDHTMLiFrameDocument.readyState != "complete" ) {}
var oDIVwholePage = oDHTMLiFrameDocument.all['DIVwholePage']; // dhtml object model
// You can NOT get oDIVwholePage using DOM. That is, you can't get it using oDOMiFrameDocument.getElementById('DIVwholePage').
// MUST use DHTML model to GET the DIV inside the document inside the iFrame::: oDHTMLiFrame.window.document.all['DIVwholePage']
// MUST use DOM model to set the height of the iFrame!!! DHTML does not let me set height
oDOMiFrame.height = oDIVwholePage.offsetHeight+20;
}
}That code also seems to resize the iFrame relative to its contents... you may want to change the section in blue to:
oDOMiFrame.height = document.height; OR.. oDOMiFrame.height = window.height;
you may want to check out the table halfway down this page to find out which "height" you want...
http://www.quirksmode.org/js/doctypes.html
Last edited by MattEvans : Dec 8th, 2006 at 3:36 pm.
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Dec 2006
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Thanks appreciate the quick response :cheesy: Okay i tried it, however, it seems to still not automatically remove the scroll bars and make the height 100%. Here is the updated code. I tried a local file but still teh same issue. Any thoughts. Can someone try running the following from a browser to test it?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0;}
</style>
<script type="text/javascript">
function resize_iFrames(){
siFrameID = "Original";
var oDHTMLiFrame = document.frames[siFrameID];
var oDHTMLiFrameDocument = oDHTMLiFrame.document
var oDOMiFrame = document.getElementById(siFrameID);
var oDOMiFrameDocument = oDOMiFrame.document
while (oDHTMLiFrameDocument.readyState != "complete" ) {}
var oDIVwholePage = oDHTMLiFrameDocument.all['DIVwholePage']; // dhtml object model
oDOMiFrame.height = oDIVwholePage.offsetHeight+20;
}
</script>
</head>
<body>
<h1>Careers</h1>
<IFRAME name=Original id=Original frameborder=0 onLoad="resize_iFrames();"
src='http://www.recruitingcenter.net/clients/sybron/publicjobs/' >
</IFRAME>
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0;}
</style>
<script type="text/javascript">
function resize_iFrames(){
siFrameID = "Original";
var oDHTMLiFrame = document.frames[siFrameID];
var oDHTMLiFrameDocument = oDHTMLiFrame.document
var oDOMiFrame = document.getElementById(siFrameID);
var oDOMiFrameDocument = oDOMiFrame.document
while (oDHTMLiFrameDocument.readyState != "complete" ) {}
var oDIVwholePage = oDHTMLiFrameDocument.all['DIVwholePage']; // dhtml object model
oDOMiFrame.height = oDIVwholePage.offsetHeight+20;
}
</script>
</head>
<body>
<h1>Careers</h1>
<IFRAME name=Original id=Original frameborder=0 onLoad="resize_iFrames();"
src='http://www.recruitingcenter.net/clients/sybron/publicjobs/' >
</IFRAME>
</body>
</html>
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 954
Reputation:
Rep Power: 5
Solved Threads: 48
well, here's a solution... it uses a Timer, so it's not optimal... but it should work on all browsers...
EDIT: This code isn't really network-dependant; so it should work in a local file. I've tested it in a local file on Opera and Firefox 2.. I don't have IE on this computer so I can't test it there...
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0;}
</style>
<script type="text/javascript">
function lock_iFrame(named){
var thisTimer = setTimeout("resize_iFrame('"+named+"')", 1000);
return thisTimer;
}
function resize_iFrame(named){
siFrameID = named;
var targetFrame = document.getElementById(siFrameID);
targetFrame.height = getHeight() - targetFrame.offsetTop;
}
/*This code is adapted from code in the example at http://www.howtocreate.co.uk/tutorials/javascript/browserwindow. Check it out, it's quite informative*/
function getHeight() {
var myHeight = 0;
if(typeof(window.innerHeight)=='number'){
//Non-IE
myHeight = window.innerHeight;
}else if(document.documentElement && document.documentElement.clientHeight){
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
}else if(document.body && document.body.clientHeight){
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
</script>
</head>
<body onLoad="lock_iFrame('Original');">
<h1>Careers</h1>
<IFRAME name=Original id=Original frameborder=0 style="width:100%;"
src='http://www.recruitingcenter.net/clients/sybron/publicjobs/' >
</IFRAME>
</body>
</html>EDIT: This code isn't really network-dependant; so it should work in a local file. I've tested it in a local file on Opera and Firefox 2.. I don't have IE on this computer so I can't test it there...
Last edited by MattEvans : Dec 8th, 2006 at 7:26 pm.
If it only works in Internet Explorer; it doesn't work.
![]() |
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
- Dynamicallu Resizeing IFRAME based on content (JavaScript / DHTML / AJAX)
- Dynamic iframe height (JavaScript / DHTML / AJAX)
- Dynamic iFrame height, not working in ie without refresh. (JavaScript / DHTML / AJAX)
- iframe height (HTML and CSS)
- iframe help (HTML and CSS)
- Help building Table, Images dont cleanly come together (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: Iframe opening new window problem
- Next Thread: Res. Form/Dreamweaver 8/Email to Address


Linear Mode