when i just use frame option, the drop down menu goes behind...it does over lap with the frames. However when i use iframe options, it overlaps on the iframes but then i am not able to set the height to 100% for all 3 iframes. Can you help me with this. In google chrome it is set to 100% but in IE it comes about 20% height only, even though i set to 100%.
For 100% height to work you need to give the parent containers this height as well: CSS
Code:
html {
height: 100%;
}
body {
height: 100%;
overflow: auto; /* to prevent the body from appearing below the iframes */
}
But the height also includes the menu, etc., so the iframes will probably stretch beyond the browser viewport.
You could consider just giving the iframes a specific height and allowing scrollbars to appear.
Edited: You may need to set the iframe heights to 100% using CSS or the style attribute.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
Last edited by AndrewGSW; 05-30-2011 at 01:24 PM..
below code is working very well for a single iframe(width 80%, height 100%), but when i try to add another iframe, it does not work...height of 100% is not achieved in the 2nd iframe.
second iframe is of width=20% and height=100%, I tried to modify the above code but it isnt working. for the 2nd iframe the height comes as only 20%, i am bad at javascript and not able to modify the above code to make second iframe also as 100% height....can somebody help me in correcting the second iframe...i am desperately in need to get this work.
<iframe id="content" name="content" src="content.asp" width="80%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
if ( this.offsetTop )
height -= this.offsetTop;
// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */
this.style.height = height;
};
document.getElementById('content').onload = resizeIframe;
document.getElementById('left_page').onload = resizeIframe;
document.getElementById('right_page').onload = resizeIframe;
window.onresize = resizeIframe;
this should refer to the element that triggered the event, I believe.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
nope..that didnt work, on using your code, both are getting height of about 20% only. If i use two separate functions with almost same coding, i get the 1st iframe of 20% and 2nd one comes as 100% of height.
Code:
<iframe id="content" name="content" src="content.asp" width="80%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('content').offsetTop;
// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */
document.getElementById('content').style.height = height;
};
document.getElementById('content').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
<iframe id="right_page" name="right_page" src="right_page.asp" width="20%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe1() {
var height1 = document.documentElement.clientHeight;
height1 -= document.getElementById('right_page').offsetTop;
// not sure how to get this dynamically
height1 -= 20; /* whatever you set your body bottom margin/padding to be */
document.getElementById('right_page').style.height = height1;
};
document.getElementById('right_page').onload = resizeIframe1;
window.onresize = resizeIframe1;
</script>
somewhere something needs to be changed so that these two functions are treated separately.
Ooops...one other problem...though it has solved but there is an issue with the browser...
In IE it works fine...height is taken as 100%
but in google chrome...both iframes are about 20% only...
Is there any other alternative...what best can be used instead of frames...or is best to have a single page and have different pages called each time it loads a new page.
I've been playing with this and have got the following to work (almost ). It resizes the iframes to the viewport height when the page is loaded or re-loaded.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Setting iFrame Heights</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
iframe {
margin: 0;
border: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var offs = 0;
function ResizeI(e) {
var hgt, evt = e || window.event;
var elem = evt.target || evt.srcElement;
if ( !offs ) {
var obj = elem;
if ( obj.offsetParent ) {
do {
offs += obj.offsetTop;
} while ( obj = obj.offsetParent );
}
}
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
elem.style.height = (hgt-20) + 'px';
}
function ResizeAllF() {
if ( !offs ) return true;
var fmes = document.getElementsByTagName('iframe');
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
for ( var i=0, iLen = fmes.length; i < iLen; i++ ) {
fmes[i].style.height = (hgt-20) + 'px';
}
}
</script>
</head>
<body>
<h1>Dynamic Height for iFrames</h1>
<p>Sets the heights of the iFrames to fill the viewport. (Setting html, body and iframe height to
100% would work almost as well?!)</p>
<p>This doesn't always work properly in IE as it cannot determine the clientHeight until
the page has loaded - it works on a page refresh.</p>
<iframe id="left_page" src="frame1.html" width="8%" ></iframe>
<iframe id="content" src="frame2.html" width="75%%" ></iframe>
<iframe id="right_page" src="frame3.html" width="15%" ></iframe>
<script type="text/javascript">
if ( window.addEventListener ) {
document.getElementById('left_page').addEventListener('load',ResizeI,false);
document.getElementById('content').addEventListener('load',ResizeI,false);
document.getElementById('right_page').addEventListener('load',ResizeI,false);
window.addEventListener('resize',ResizeAllF,false);
} else {
document.getElementById('left_page').attachEvent('onload',ResizeI);
document.getElementById('content').attachEvent('onload',ResizeI);
document.getElementById('right_page').attachEvent('onload',ResizeI);
window.attachEvent('onresize',ResizeAllF);
}
</script>
</body>
</html>
But for IE(8) aargh! it doesn't determine the viewport height first time, so I've had to set a default height of 600. When then page is reloaded it correctly determines the height?!
I haven't added the function to window.resize, although you can do so if you wish. (I don't like to use this.)
[Ideally, I suppose, the onload events for the iframes should be added within the iframes themselves, otherwise document.getElementById('content'), etc., may not yet be available.]
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
Last edited by AndrewGSW; 05-31-2011 at 11:54 AM..
Reason: Revised code
.. I may have mis-understood your requirement. Never mind
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
Would you recommend me to use this format??? i am not sure if this is the right way of building the website. Just above the 3 iframes i have a multi-level drop menu bar, when any of the menu option is selected it would display the corresponding page in the content page of the iframe(center iframe). I see too many scroll bars going around, which doesnt look that good.
I don't think this is the best approach, particularly as IE can mis-behave on first loading the page - it can fail to correctly determine the browser height until the page is loaded.
Tweaking the code as follows will reduce the number of scrollbars appearing:
Code:
elem.style.height = (hgt-20) + 'px';
In particular, this should prevent the scrollbar for the browser window appearing (unless there is other content on the page).
Sometimes the best approach is to do nothing . Either just let the iframes assume the height of their content or, perhaps better, just set them all to a specific pixel height: scrollbars will only then appear if the content is taller than the height you set.
The previous approach metioned was to set the html and body height to 100%, and set the iframe heights to, perhaps, 80%. Then the iframe heights would adjust if the browser is resized. (I think I still prefer the fixed pixel height approach )
Out of interest I modified the code so that it resizes the iframes when the browser is resized, below. But I'm still having to reload the page in IE before it behaves
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Setting iFrame Heights</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
iframe {
margin: 0;
border: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var offs = 0;
function ResizeI(e) {
var hgt, evt = e || window.event;
var elem = evt.target || evt.srcElement;
if ( !offs ) {
var obj = elem;
if ( obj.offsetParent ) {
do {
offs += obj.offsetTop;
} while ( obj = obj.offsetParent );
}
}
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
elem.style.height = (hgt-20) + 'px';
}
function ResizeAllF() {
if ( !offs ) return true;
var fmes = document.getElementsByTagName('iframe');
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
for ( var i=0, iLen = fmes.length; i < iLen; i++ ) {
fmes[i].style.height = (hgt-20) + 'px';
}
}
</script>
</head>
<body>
<h1>Dynamic Height for iFrames</h1>
<p>Sets the heights of the iFrames to fill the viewport. (Setting html, body and iframe height to
100% would work almost as well?!)</p>
<p>This doesn't always work properly in IE as it cannot determine the clientHeight until
the page has loaded - it works on a page refresh.</p>
<iframe id="left_page" src="frame1.html" width="8%" ></iframe>
<iframe id="content" src="frame2.html" width="75%%" ></iframe>
<iframe id="right_page" src="frame3.html" width="15%" ></iframe>
<script type="text/javascript">
if ( window.addEventListener ) {
document.getElementById('left_page').addEventListener('load',ResizeI,false);
document.getElementById('content').addEventListener('load',ResizeI,false);
document.getElementById('right_page').addEventListener('load',ResizeI,false);
window.addEventListener('resize',ResizeAllF,false);
} else {
document.getElementById('left_page').attachEvent('onload',ResizeI);
document.getElementById('content').attachEvent('onload',ResizeI);
document.getElementById('right_page').attachEvent('onload',ResizeI);
window.attachEvent('onresize',ResizeAllF);
}
</script>
</body>
</html>
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
Last edited by AndrewGSW; 05-31-2011 at 11:56 AM..
Reason: Oops, edited wrong code
Sorry, last revision I promise . This version works much better with IE: if IE doesn't determine the browser height then it just uses a default height of 600px for the iframes and assumes an offset for these of 150px. That is, the distance from the browser top to the top of the iframe is (approx.) 150px.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Setting iFrame Heights</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
iframe {
margin: 0;
border: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var offs = 0;
function ResizeI(e) {
var hgt, evt = e || window.event;
var elem = evt.target || evt.srcElement;
if ( !offs ) {
var obj = elem;
if ( obj.offsetParent ) {
do {
offs += obj.offsetTop;
} while ( obj = obj.offsetParent );
}
}
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) {
offs = 150; /* Aaargh! IE */
hgt = 600;
}
elem.style.height = (hgt-20) + 'px';
}
function ResizeAllF() {
if ( !offs ) return true;
var fmes = document.getElementsByTagName('iframe');
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
for ( var i=0, iLen = fmes.length; i < iLen; i++ ) {
fmes[i].style.height = (hgt-20) + 'px';
}
}
</script>
</head>
<body>
<h1>Dynamic Height for iFrames</h1>
<p>Sets the heights of the iFrames to fill the viewport. (Setting html, body and iframe height to
100% would work almost as well?!)</p>
<p>This doesn't (currently) work properly in IE as it cannot determine the clientHeight until
the page has loaded - it works on a page refresh.</p>
<iframe id="left_page" src="frame1.html" width="8%" ></iframe>
<iframe id="content" src="frame2.html" width="75%%" ></iframe>
<iframe id="right_page" src="frame3.html" width="15%" ></iframe>
<script type="text/javascript">
if ( window.addEventListener ) {
document.getElementById('left_page').addEventListener('load',ResizeI,false);
document.getElementById('content').addEventListener('load',ResizeI,false);
document.getElementById('right_page').addEventListener('load',ResizeI,false);
window.addEventListener('resize',ResizeAllF,false);
} else {
document.getElementById('left_page').attachEvent('onload',ResizeI);
document.getElementById('content').attachEvent('onload',ResizeI);
document.getElementById('right_page').attachEvent('onload',ResizeI);
window.attachEvent('onresize',ResizeAllF);
}
</script>
</body>
</html>
I'm happy with this version Andy.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
Thank you very much Andrew for working hard on this..i really appreciate it, I totally lost hope before you started replying to it . But i was lucky enough to get you.
Just one more small doubt..I am not sure if its the right behaviour or not...
this is what i have for my website....
Just above the 3 iframes i have the javascript horizontal multi level menu bar and little above that i am planning to have the website banner. when user select any of the option from the menu, it shows up on the content area(middle iframe). I am able to get the data to content area but the question here is when i select any of the menu option, the url remains the same...ie if i open the website like http://localhost/abc/main.html...it remains same throughout even though i select menu option...the url doesnt change as per my selection...is this correct behaviour for the menu selection...i am new in the javascript world..infact little new in coding world too
Before you post, read our: 
). It resizes the iframes to the viewport height when the page is loaded or re-loaded.
it doesn't determine the viewport height first time, so I've had to set a default height of 600. When then page is reloaded it correctly determines the height?!
thank you.
I modified the code so that it resizes the iframes when the browser is resized, below. But I'm still having to reload the page in IE before it behaves 
