Klaus,
I really appreciate the idea and it might actually work for a site
with a fixed width. The main div on this one, however is 'width: 90%'
and the effects of the off-screen technique were pretty hilarious .
On the first load, the pages got all jumbled. On refresh, the
'position:fixed' div from the fourth tab showed up on all the tabs,
plus a few other problems. I went out on a limb and tried:
.ui-tabs-hide {
position: relative;
left: -200%;
}
The result was actually slightly better, but the main body div ('width:
90%') extended itself out to the off-screen div, leaving me with no
border on one side.
I also tried loading the tab in question as an ajax (remote) page.
All the did was slow things down and force me to make an additional
call for scrollTo.
So for now, my solution has been to just name each rounded div
individually in the call to rounded-corners-canvas, and to leave it
out of the call to tabs altogether, like this:
$(document).ready(function() {
$('.round_box, .round_box2').corner();
$('#tab_menu ul').tabs({ cache: false });
});
Note that I can have lots of divs with the '.round_box' class and
they'll all be rounded, so long as they're on the first tab. They
will not be rounded on any other tab. So every other rounded div has
the '.round_box2' class and they all work, no matter what tab they're
on (but again, not the first tab or else all other tabs wouldn't
work). Make sense?
This approach works even if you call the fourth tab first, so it seems
to actually have to do with the order on the actual html page (or php
in my case), as opposed to the order in which the tabs are called.
In the end, it was an easy workaround, I guess, but may be something
you'll want to note for later tabs development, Klaus.
Thanks, Klaus and Dave, for your help!
- Sterling