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 2 6128
DaveO wrote: 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
--
When you have eliminated all which is impossible, then
whatever remains, however improbable, must be the truth.
-- Sherlock Holmes
DaveO wrote: 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
--
When you have eliminated all which is impossible, then
whatever remains, however improbable, must be the truth.
-- Sherlock Holmes This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Catherine Lynn Smith |
last post by:
I want to know the recommended way to handle scripting of/with
containers such as an iframe. I have a page with border-navigation
bars on the top/bottom/left/right and I want to use an iframe to...
|
by: Bootstrap bill |
last post by:
I have an iframe embedded in a single cell table. I'd like to resize the
table and iframe to match any changes made to window size. Is this possible?
--
"It's easy enough to be pleasant, when...
|
by: gsb |
last post by:
Don't know if this is the right place to post this JavaScript issue.
If not, could someone point me in the right direction please.
I am trying to make a "cross browser compliant" floating...
|
by: coolsti |
last post by:
I need some help here. I am making an application which allows a user to
look at a series of picture files one at a time, and enter the outcome of
various visual tests to a database. The...
|
by: Matt S |
last post by:
I have an advertiser that delivers content in an iFrame. Because of
space limitations on my page, I have set the height of the iFrame to be
half that of it's contents. The problem is that the width...
|
by: tamasumalta |
last post by:
I am just new to vb.net. I used to program in vb 6. Can you kindly
indicate how I can maximise a form window to full in runtime. I think
this is a standard thing to design controls.
If this is...
|
by: tequilamala |
last post by:
I have an Iframe in one of the pages i am developing... the iframe is suppose to scroll up and down and the links target the iframe. the problem is that the iframe scrolls side to side on internet...
|
by: Z1P2 |
last post by:
I would like to gradually resize an iframe in an onmouseover event.
I can easily do it with an image, but when I try to do it with an iframe, it doesn't do anything. So first of all, is it possible...
|
by: matwilko |
last post by:
hi, i am trying to create a simple version of itunes...and i am using iframes to do this. I have already set up the iframes using dreamweaver and used a drop-down menu to select the genre. When...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
| |