[jQuery] Re: multiple width kwicks

[Andy Matthews]

I'm pretty sure that the whole point is that the kwicks are evenly
distributed. You can't have multiple widths.


andy

-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of jesusbet
Sent: Friday, December 05, 2008 1:17 PM
To: jQuery (English)
Subject: [jQuery] multiple width kwicks


Hi.

I'm implementing this effect for a project:
http://www.jeremymartin.name/projects.php?project=kwicks

The problem is that I'm trying to apply the same effect but using different
width buttons, I mean, the first button is 88px width, the second 100px, the
third 75px and so on...

I tryed defining the widths in the CSS but didn't work, the effect cuts in
700px even if I defined a 960px container, got this CSS:
* defaults for all examples */
.kwicks {
        list-style: none;
        position: relative;
        margin: 0;
        padding: 0;
        width: 690px;
}
.kwicks li{
        display: block;
        overflow: hidden;
        padding: 0;
/*      cursor: pointer; */
        float: left;
        width: 130px; /*  */
        height: 50px;
        margin-right: 0px;
}

.kwicks li a {
        display: block;
        height: 50px;
}
#it1 {
        background: url(../img/nav/home.jpg) no-repeat; } #it1.active {
        background-color: #86e6bb;
}
#it2 {
        background: url(../img/nav/about.jpg) no-repeat; } #it2.active {
        background: url(../img/nav/about_selected.jpg) no-repeat; }
#it3 {
        background: url(../img/nav/procedures.jpg) no-repeat; } #it3.active
{
        background-color: #f5979b;
}
#it4 {
        background: url(../img/nav/treatments.jpg) no-repeat; } #it4.active
{
        background-color: #efaffa;
}
#it5 {
        background: url(../img/nav/facilities.jpg) no-repeat; } #it5.active
{
        background-color: #86e6bb;
}
#it6 {
        background: url(../img/nav/packages.jpg) no-repeat; } #it6.active {
        background-color: #8d9cdc;
}
#it7 {
        background: url(../img/nav/photogallery.jpg) no-repeat; }
#it7.active {
        background-color: #f5979b;
}
#it8 {
         background: url(../img/nav/testimonials.jpg) no-repeat; }
#it8.active {
        background-color: #efaffa;
}

and the js I'm using is in the example 2:
http://www.jeremymartin.name/examples/kwicks.php?example=2

As I said, I tried adding the width: 100px; property to each #it (<li
id="it1"></li>, <li id="it2"></li>, <li id="it3"></li> and so on) but didn't
work.

Is there a way to do that effect in different width buttons or I have to
change my design and make all buttons the same width?

Thank you very much!