Maximise size of iFrame

[DaveO]

OK. Now I'm all googled out and still puzzled !

I admit I am very new to javascript, but think that it is the only solution
to this.

I have a web page with a table ( 2 columns, 1 row )

The left cell width is set at 150px
The right cell at 100%

The right cell contains an iFrame. The iFrame width is 100% & height 100%

This is what I want to happen :

I don't want scroll bars either on the right or bottom.
When the browser is resized, the left cell width remains unchanged, but the
height adjusts to the browsers height. Works fine.
The right cell resizes fine.
The iFrame does not.
If I set the iFrame width to 100% and height to 100%, the width resizes but
the height doesn't change.
If I set the iFrame height as a numeric value ( eg.. height=300 ) it changes
to that size.

After googling, I found this :

function changeIframe()
{
var new_height = document.getElementById('table1').height;
document.getElementById('cFrame1').height = new_height;
}
window.onresize= changeIframe;
</script>

I understand that this --should-- read the height from the table and set the
iFrame height using this value.

However, the table's height is "100%" and I think that I need to get the
height in pixels as the iFrame appears to ignore '%' for height values.

Any suggestions most welcome.

Regards
DaveO

 

[Thomas 'PointedEars' Lahn]

I admit I am very new to javascript, but think that it is the only
solution to this.

It is not a solution at all here.

I have a web page with a table ( 2 columns, 1 row )
The left cell width is set at 150px
The right cell at 100%

IOW: You have a deprecated table layout rather than a recommended
style sheets layout. Apparently you have slept for, say, the last
five years or had a very bad teacher or documentation at your hands.

The right cell contains an iFrame. The iFrame width is 100% & height 100%

This is what I want to happen :

I don't want scroll bars either on the right or bottom.

Use CSS:

overflow:hidden;

Although I would not recommend that: users want to scroll when necessary.

When the browser is resized, the left cell width remains unchanged, but
the height adjusts to the browsers height. Works fine.
The right cell resizes fine.
The iFrame does not.

Why should it? 100% of positioned parent (table cell) is 100% of the
table cell, not 100% of the viewport. The chicken-and-the-egg problem
here is that the table cell is as high as the united maximum height of
its positioned childs which happens to be the height of the `iframe'
element only here; this is why formatting the child element with 100%
height does not change anything.

Therefore, you have to drop tables (*g*), format the `body' element
position:absolute and of maximum height (use `right' and `bottom'
properties where supported, `width' and `height' where not), have two
block elements float around each other using all available height (of
the positioned parent) and format the `iframe' as child of the second
floating block element accordingly. Good luck.

If I set the iFrame width to 100% and height to 100%, the width resizes
but the height doesn't change.
If I set the iFrame height as a numeric value ( eg.. height=300 ) it
changes to that size.

Of course.

After googling, I found this :

function changeIframe()
{
var new_height = document.getElementById('table1').height;
document.getElementById('cFrame1').height = new_height;
}
window.onresize= changeIframe;

Junk code that does not work if client-side script support is
absent or disabled.


PointedEars

 

[Thomas 'PointedEars' Lahn]

I admit I am very new to javascript, but think that it is the only
solution to this.

It is not a solution at all here.

I have a web page with a table ( 2 columns, 1 row )
The left cell width is set at 150px
The right cell at 100%

IOW: You have a deprecated table layout rather than a recommended
style sheets layout. Apparently you have slept for, say, the last
five years or had a very bad teacher or documentation at your hands.

The right cell contains an iFrame. The iFrame width is 100% & height 100%

This is what I want to happen :

I don't want scroll bars either on the right or bottom.

Use CSS:

overflow:hidden;

Although I would not recommend that: users want to scroll when necessary.

When the browser is resized, the left cell width remains unchanged, but
the height adjusts to the browsers height. Works fine.
The right cell resizes fine.
The iFrame does not.

Why should it? 100% of positioned parent (table cell) is 100% of the
table cell, not 100% of the viewport. The chicken-and-the-egg problem
here is that the table cell is as high as the united maximum height of
its positioned children which happens to be the height of the `iframe'
element only here; this is why formatting the child element with 100%
height does not change anything.

Therefore, you have to drop tables (*g*), format the `body' element
position:absolute and of maximum height (use `right' and `bottom'
properties where supported, `width' and `height' where not), have two
block elements float around each other using all available height (of
the positioned parent) and format the `iframe' as child of the second
floating block element accordingly. Good luck.

If I set the iFrame width to 100% and height to 100%, the width resizes
but the height doesn't change.
If I set the iFrame height as a numeric value ( eg.. height=300 ) it
changes to that size.

Of course.

After googling, I found this :

function changeIframe()
{
var new_height = document.getElementById('table1').height;
document.getElementById('cFrame1').height = new_height;
}
window.onresize= changeIframe;

Junk code that does not work if client-side script support is
absent or disabled.


PointedEars