jQuery tabs one ID behind

[jellej]

I have a jQuery tabs slider that auto rotates and depending on the slide it will adjust the background of the <div> element it is in. Auto rotate goes fine, the correct background is loaded, but when I manually click the tabs, it doesn't take the correct values. It's almost like it's 1 behind.

Below is the HTML code

    <div id="featured">
        <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item">
                <a href="#fragment-1" id="active-1" class=""><span style="background-color: #94d1e3; background-image: url(uploads/tx_background_img/banner_bg2.jpg); display:none;"></span><span>Test</span></a>
            </li>
            <li class="ui-tabs-nav-item ui-tabs-selected">
                <a href="#fragment-2" id="active-2" class=""><span style="background-color: #e6c8a6; background-image: url(uploads/tx_background_img/banner_bg.png); display:none;"></span><span>Test1</span></a>
            </li>
            <li class="ui-tabs-nav-item">
                <a href="#fragment-3" id="active-3" class=""><span style="background-color: #94d1e3; background-image: url(uploads/tx_background_img/banner_bg2_01.jpg); display:none;"></span><span>Test2</span></a>
            </li>
            <li class="ui-tabs-nav-item">
                <a href="#fragment-4" id="active-4" class=""><span style="background-color: #e6c8a6; background-image: url(uploads/tx_background_img/banner_bg_01.png); display:none;"></span><span>test3</span></a>
            </li>
        </ul>
        <div>
            <img src="fileadmin/templates/images/inner_banner_top_corner.png" alt="">
        </div>
        <div class="banner_slide">
            <div id="fragment-1" class="ui-tabs-panel ui-tabs-hide" style="">
                <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the
                    1500s, when an unknown printer took a galley of type and scrambled it to
                    make a type specimen book. It has survived not only five centuries, but
                    also the</h1>
                <div class="banner_img">
                    <img src="uploads/tx_header_img/banner_slide_bg.png" width="256" height="279"
                    border="0" class="customer_img" alt="">
                </div>
                <div class="banner_btn">
                    <a href="/klanten/"><img src="fileadmin/templates/images/banner_btn.png" alt=""></a>
                </div>
            </div>
            <div id="fragment-2" class="ui-tabs-panel" style="">
                <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the
                    1500s, when an unknown printer took a galley of type and scrambled it to
                    make a type specimen book. It has survived not only five centuries, but
                    also the</h1>
                <div class="banner_img">
                    <img src="uploads/tx_header_img/banner_slide_bg_01.png" width="256" height="279"
                    border="0" class="customer_img" alt="">
                </div>
                <div class="banner_btn">
                    <a href="/"><img src="fileadmin/templates/images/banner_btn.png" alt=""></a>
                </div>
            </div>
            <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
                <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the
                    1500s, when an unknown printer took a galley of type and scrambled it to
                    make a type specimen book. It has survived not only five centuries, but
                    also the</h1>
                <div class="banner_img">
                    <img src="uploads/tx_header_img/banner_slide_bg_02.png" width="256" height="279"
                    border="0" class="customer_img" alt="">
                </div>
                <div class="banner_btn">
                    <a href="/contact/"><img src="fileadmin/templates/images/banner_btn.png" alt=""></a>
                </div>
            </div>
            <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
                <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the
                    1500s, when an unknown printer took a galley of type and scrambled it to
                    make a type specimen book. It has survived not only five centuries, but
                    also the</h1>
                <div class="banner_img">
                    <img src="uploads/tx_header_img/banner_slide_bg_03.png" width="256" height="279"
                    border="0" class="customer_img" alt="">
                </div>
                <div class="banner_btn">
                    <a href="/contact/"><img src="fileadmin/templates/images/banner_btn.png" alt=""></a>
                </div>
            </div>
        </div>
        <div>
            <img src="fileadmin/templates/images/inner_banner_bottom_corner.png" alt="">
        </div>
    </div>

Below is the jQuery

    $(document).ready(function() {
        var ac1 = false;

        //$("#featured > ul").tabs({fx:{opacity: ""},event: "mouseover"}).tabs("option", 5000, false);
        var $tabs = $("#featured > ul").tabs({
            fx: {
                opacity: "toggle"
            }
        }).tabs("rotate", 5000, true);

        var id = $('.ui-tabs-selected a').attr('id');
        var colorCode = $("#" + id + " span").css('backgroundColor');
        $(".banner_color").css("backgroundColor", colorCode);
        var imageCode = $("#" + id + " span").css('backgroundImage');
        $("#wsnSlider").css("backgroundImage", imageCode);

        $("#featured > ul").bind('tabsselect', function(event, ui) {
            var id = $('.ui-tabs-selected a').attr('id');
            var id2 = parseInt(id.replace("active-", "")) || 0;

            id2 = id2 + 1;
            if (id2 == 5) {
                id2 = 1;
            }
            console.log(id2);

            var colorCode = $("#active-" + id2 + " span").css('backgroundColor');
            $(".banner_color").css("backgroundColor", colorCode);
            var imageCode = $("#active-" + id2 + " span").css('backgroundImage');
            $("#wsnSlider").css("backgroundImage", imageCode);

            console.log(colorCode + " " + imageCode + " ");
        });
    });​

[Taywin]

Well, lines 21~24 will increment the tab number for you before it changes the value. Why do you need to increment the id value (id2)?

[jellej]

Hi taywin,

Thank you for your reply. I need to increment the id value because otherwhise it would take the wrong styling. You can check the firebug console.

You can have a look at the slider here: http://resolveit.pm-it.nl/ it's the one with the cube in the top middle, "test 1", ... . OR with class ui-tabs-nav

[jellej]

First and third tab should be having a blue background, second and fourth a brown.

If you click between 1 and 3, it will give you a blue background. When you click number 2 or 4 afterwards, you will still get a blue background. When you clikc number 1 or 3 again, you will get a brown background.

This shows that it always is 1 id behind, so it takes the one before last clicked.. (if that makes sense) , removing the id2 = id2 + 1; , does not help.

[Taywin]

I'm trying to understand your JQuery script because I don't use JQuery. From my observation using Firebug on FF, it shows that you have a background image for each link, correct? The image named banner_bg_01.png, banner_bg2.png, banner_bg.png, and banner_bg2_01.png respectively. When you click on a tab, the background image is not off by 1, but it is actually not use the selected tab background. What it uses is the next background image as if your click is just to move the slider forward 1 step.

For example, the current slide is showing Test2 (banner_bg.png). You click on Test1 (or even Test) and expecting its background to show. However, the display background is now for Test3 (banner_bg2_01.png). Below is what I guess it should be...

$("#featured > ul").bind('tabsselect', function(event, ui) {
    var id = $('.ui-tabs-selected a').attr('id');
    var id2 = parseInt(id.replace("active-", "")) || 0;

    id2 = id2 + 1;
    if (id2 == 5) {
        id2 = 1;
    }
    console.log(id2);  // <- not sure if it needs id2 or id

    var colorCode = $("#active-" + id + " span").css('backgroundColor');
    $(".banner_color").css("backgroundColor", colorCode);
    var imageCode = $("#active-" + id + " span").css('backgroundImage');
    $("#wsnSlider").css("backgroundImage", imageCode);

    console.log(colorCode + " " + imageCode + " ");
});

[jellej]

Hi Taywin,

You are correct, each link has a background image and a background color. Also each link decides what is in the main box (ie. the cube and the text).

If you use id on line 11 and 13, it won't work because active-X is not a number.

[Taywin]

Oh I forget about that, sorry...

By the way, I just tried it again and see what happens. It seems that the event "tabselect" is binding to "rotate" event. If I changed the bind() to click(), it works fine with the click, but then rotate event won't change the background image.

So, what I may try is...
1)Leave the function in bind() as your original version
2)Add :select in your $tabs as

var $tabs = $("#featured > ul").tabs({
  fx: {
    opacity: "toggle"
  }
  select: function(ui) {
    // get the ui index here and do the background change
}).tabs("rotate", 5000, true);

Hope this help.