Email conversation
From | Clivus Nondog |
To | Me |
Subject | javascript oddity in all recent Opera |
Date | 21 October 2005 01:45 |
Hi,
Thanks for the brilliantly useful website!
I'm having a problem resizing table cell widths from an 'onload' on a
page in an iframe. Works flawlessly in Firefox, Konquerer, ie5.5,
Netscape 8, etc.
The parent page has a table with 1 row 2 cells. Each cell has an
iframe:
<table summary="one cell for width" width="100%" cellspacing="5"
border="0" cellpadding="5" align="center" id="iframe_table">
<tr>
<td id="iframe_table_left">
<iframe src="people_left.htm" height="400" width="100%"
scrolling="auto" align="center" marginheight="5" marginwidth="5"
frameborder="0" name="iframe_left" id="iframe_left">
</iframe>
</td>
<td id="iframe_table_right">
<iframe src="people_right.htm" height="400" width="100%"
scrolling="auto" align="center" marginheight="5" marginwidth="5"
frameborder="0" name="iframe_right" id="iframe_right">
</iframe>
</td>
</tr>
</table>
I have tried all the various ways of coding this as you can see from
the commented out lines below. In Opera javascript alerts indicate the
attribute is changed but the table is not redrawn. (is there a redraw
or resize function for elements?)
I tried removing the iframes completely and resizing with an 'onload'
in the parent page - no joy. Also tried resize instructions for both
table cells.
The parent page is also contained by an iframe but that doesn't bother
any other browsers
javascript:
cellSize = parent.document.getElementById('iframe_table_left');
// alert(cellSize.getAttribute('style.width'));
// cellSize.setAttribute('style.width','33%');
// alert(cellSize.getAttribute('style.width'));
cellSize.width = 33 + '%';
cellSize.style.width = 33 + '%';
// cellSizeO = parent.document.'iframe_table_left';
// cellSizeO.style.width = 33 + '%';
// parent.document.iframe_table_left.style.width = 33%;
//
parent.document.getElementById('iframe_table_left').style.setProperty('w
idth','33%');
I've thought to use nested tables for the iframes so each iframe has
it's own table then resize the tables but ...
or resize the iframes but I am using percentages! Opera won't resize
event to pixel dimensions.
I am at my wits end with this and cannot find a mention of it on the
net!
The only solution I can think of is to load different versions of the
parent page for each link but that rather defeats the object of using
frames (Iknow you don't like frames but I don't want to rely on
js/css). Perhaps there is some ways to put iframes side by side
without a table then resize the iframes. I'll try that next but in the
meantime if you have any clues please let me know.
See the actual pages at:
[URL]
Thanks a bundle
From | Me |
To | Clivus Nondog |
Subject | Re: javascript oddity in all recent Opera |
Date | 21 October 2005 19:10 |
Clivus,
> I have tried all the various ways of coding this as you can see from the
> commented out lines below. In Opera javascript alerts indicate the
> attribute is changed but the table is not redrawn. (is there a redraw or
> resize function for elements?)
Yep. This is a known bug in Opera, and thankfully it is fairly simple to
fix. It is a reflow bug. Forcing a reflow fixes it. Reflows can be forced by
changing the class of the body element.
cellSize = parent.document.getElementById('iframe_table_left');
cellSize.style.width = '30%';
document.body.className += '';
Note, the body class trick works in most browsers, and is capable of solving
reflow issues in almost all of them, so it is a useful trick to remember.
Hope this does what you need.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
From | Clivus Nondog |
To | Me |
Subject | Re: javascript oddity in all recent Opera |
Date | 22 October 2005 02:57 |
FANTASTIC!!!!!
Thankyou soooo much. Searched high and low for this one.
Low marks to Opera for not making this findable :(
Still my favourite browser (esp now adfree)
Respect
Clivus