jQuery Forum

> My problem is that my corners will round just fine so long as they're
> in the first tab. After that, they don't round at all. I can have
> several divs on the first page and all will have rounded corners with
> no problems, but nothing beyond that first tab.
My guess--just a guess mind you--is that they are not rounded because
they are contained in an element that is hidden. jQuery makes heroic
efforts to determine the dimensions of an element if it is directly
hidden (display:none) but the elements you want to round are probably
several levels down below the tab element that is hidden. In those
cases the browser often returns bad values for height and width.
If that is the problem, you could fix it by rounding the corners on
elements in the selected tab the first time it is selected, as soon as
it's set visible.
If it isn't the problem, then my guess was wrong. :-)

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

Addendum to my last post:
There's another reason that I need to find a better way. If I load
the 'about' tab first (go to http://reconcilers.sterlingkcreations.com/#about
to see example), the rounding doesn't work at all. So I really need
to have all rounded boxes have the same class (i.e. '.round_box' and
not '.round_box2', etc) and be able to do it with one call. Note that
it doesn't work to make two calls on the same class - I already tried.

On 30 Okt., 05:05, SterlingK <sterlingk...@sbcglobal.net>

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

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 30 Okt., 18:32, SterlingK <sterlingk...@sbcglobal.net>

Thanks, Klaus. Simplicity is good!