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.
