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
On Oct 30, 12:35 am, Klaus Hartl <[EMAIL PROTECTED]> wrote:
> On 30 Okt., 05:05, SterlingK <[EMAIL PROTECTED]> wrote:
>
>
>
> > Dave, you nailed it. I'm pretty new to jquery stuff, so I really
> > appreciate that nudge in the right direction.
>
> > What I did is a callback on 'show' in my tabs function. Two
> > relatively small problems have now arisen from that. First, in
> > Firefox the box that should be rounded flickers quite obviously when
> > the tab is loaded (not in ie7 - didn't test others). Second, I end up
> > having to make two calls to the rounded-corners plugin. One works for
> > the tab that is loaded first, one works for the tabs that are loaded
> > on 'show' (once they're clicked). Is this okay? Again, I'm fairly
> > new, but it seems like one should avoid two calls when possible. Is
> > there a better way?
>
> > Here's the code I'm using:
> > $(document).ready(function() {
> > $('#tab_menu ul').tabs({ cache: false, show: function() { $
> > ('.round_box2').corner(); } });
> > $('.round_box').corner();
> > $('#content_menu').localScroll({ speed: 800 });
>
> > });
>
> > The '.round_box' call is for that first page, the '.round_box2' is for
> > every other page. Again, I'm definitely open to learning a better
> > way.
>
> > - Sterling
>
> Another idea I have is to use an off-screen technique instead of
> "display: none;" to hide inactive tab panels. In the CSS look for the
> class "ui-tabs-hide", remove the display declaration and use this
> instead:
>
> .ui-tabs-hide {
> position: absolute;
> left: -1000px;
>
> }
>
> --Klaus
