For anyone else who deals with this issue, note that the above
solution does not work with ajax (remote) tabs. For that, I had to do
the following:
$(document).ready(function() {
$('.round_box').corner();
$('#tab_menu > ul').tabs({ cache: false, remote: true, show:
function() { $('.round_box2').corner(); } });
});
On Oct 30, 10:26 am, SterlingK <[EMAIL PROTECTED]> wrote:
> 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
