iframe height settings

[MelbJungle]

am trying to set iframe height for different screen res....but percentage is not working...

ex.. i have set to height="370", which is fine for 800x600 res, but only 3/4 page filled with 1028x768 res... I want it so it auto fills any res chosen.

anybody help me with this?

site with iframe : <sorry, no personal URLs>

thx in advance! :)

[edited by: tedster at 12:28 pm (utc) on Jan. 21, 2003]

[DrDoc]

Welcome to Webmaster World!

The only way you can do this is by dynamically setting the height/width using JavaScript.

You have two options:
1) Use the JS to check for screen resolution and then print the iframe to the page using document.write

2) Include the iframe like you normally would, but right after, put a JS that checks for screen size and change the size of the iframe if needed

Remember to check for the inner size of the window, not the inner size of the whole screen, since a lot of people (using monstrous monitors) only open smaller windows.

Also remember to have a default size (which should most likely be optimised for 800x600) since not all browsers/OS report the window size.

winWidth=document.all?document.body.clientWidth:window.innerWidth;
winHeight=document.all?document.body.clientHeight:window.innerHeight;

[MelbJungle]

ok that sounds right, so how do i add this?

Sorry, but no idea!

Also if I can't post a link to site, how is anyone supposed to see what I'm talking about, and btw. its not a personal site!

[DrDoc]

For example:

<iframe id="myIFrame" style="height:200px;width:400px;" src="example.html"></iframe>
<script type="text/javascript">
var MZ=(document.getElementById?true:false);
var IE=(document.all?true:false);
var winWidth=IE?document.body.clientWidth:window.innerWidth;
var winHeight=IE?document.body.clientHeight:window.innerHeight;
if(winHeight>500){
if(IE){
document.all['myIFrame'].style.height="300px";
}
else if(MZ){
document.getElementById('myIFrame').style.height="300px";
}
}
</script>

[MelbJungle]

thank you for your quick responses (always good!).....ok ive added this code, but still not resizing....I want the iframe to be 100% wide and 370px height is perfect setting for 800x600 default, but no height resize on 1024x768 is happening at all......maybe something im missing? this has me totally lost!

This is the code I have:

<iframe id="myIFrame" style="height:370;width:100%;" src="news.html" name="main" marginwidth="0" framespacing="0" marginheight="0" frameborder="0"></iframe>
<script type="text/javascript">
var MZ=(document.getElementById?true:false);
var IE=(document.all?true:false);
var winWidth=IE?document.body.clientWidth:window.innerWidth;
var winHeight=IE?document.body.clientHeight:window.innerHeight;
if(winHeight>500){
if(IE){
document.all['myIFrame'].style.height="370px";
}
else if(MZ){
document.getElementById('myIFrame').style.height="370px";
}
}
</script>

[DrDoc]

That's because you have set the same value in the script:
if(IE){
document.all['myIFrame'].style.height="370px";
}
else if(MZ){
document.getElementById('myIFrame').style.height="370px";
}

change 370px to whatever you want it to be ..

[MelbJungle]

ok ill try that! EDIT: Nope!

i've just worked out that me having the iframe in a table is killing the height attribute....only shows about 15% height!?

<table width="100%" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center">
<iframe id="myIFrame" style="height:370;width:100%;" src="news.html" name="main" marginwidth="0" framespacing="0" marginheight="0" frameborder="0"></iframe>
<script type="text/javascript">
var MZ=(document.getElementById?true:false);
var IE=(document.all?true:false);
var winWidth=IE?document.body.clientWidth:window.innerWidth;
var winHeight=IE?document.body.clientHeight:window.innerHeight;
if(winHeight>500){
if(IE){
document.all['myIFrame'].style.height="100%";
}
else if(MZ){
document.getElementById('myIFrame').style.height="100%";
}
}
</script>
</td>
</tr>
</table>

[DrDoc]

Then .. why do you have it in a table?
As far as I can see (from the code you pasted) the table is completely unnecessary.

[MelbJungle]

I have in table as it's in the middle of a page with header and footer, but I've figured it out, just had to make the table height="100%" also..

thank you soooo much for your help, the auto-resizing works a treat!

bigups! ;)