Hi,
I'm having no end
of fun (sic) with jQuery.tabs.
The widget is quite crafty in that it turns basic HTML like so
<div>
<ul>
<li>Tab #1</li>
...
</ul>
<div for panel #1>
</div>
<div for panel #2>
</div>
...
</div>
into a cute tabbed dialogue. (It does so by restyling
the UL and then toggling
the "display" attribute for
the panel DIVs to show/not show whatever panel is selected.)
Now I found that I can spare myself a lot
of trouble in my JS project if I insert a scrollable IFRAME into each panel.
One usability problem I'm trying to ameliorate is that when
the tabbed panel becomes larger than
the browser's window, then
the user ends up with too many scrollbars. I am trying to avoid this situation by linking
the size
of the tabbed panel to that
of $(window). That is, I trap and process
the resize event on $(window).
To make my life bearable, all components are relatively sized. This is also true, in particular,
of the IFRAMEs (100% width, 100% height).
The only exception are
the panel DIVs, which are
of fixed height (in px). And this is
the only dimension css attribute that I manipulate during my resize action.
All
of this works a treat in FF and Chrome, but IE6 is doing something rather cute: So long as I do not affect
the width
of the browser window (but only change its height), only
the panel DIV changes in height;
the IFRAME contained will not change. As a result
of this behaviour, it is not possible to shorten
the tabbed panel below
the height
of the IFRAME. I can lengthen
the DIV, yes. But
the IFRAME will not fill
the panel in that case.
All becomes good
the moment I make
the slightest change to
the width
of the browser window. In that moment,
the IFRAME expands to catch up with
the extended DIV or DIV and IFRAME contract in tandem.
Bizarre. I inserted useless CSS instructions like "position: relative" and "zoom: 1". Also nudged
the display with "display: block". No joy so far.
Any ideas?
Thanks.
