JQuery UI Rotating Tabs & Events

Question

I'm working with JQuery UI (rotating tabs) and I'd like to know how to stop the cycling when an onclick event occurs on one of the navigation tabs.

$(document).ready(function(){
                $("#sws_featured > ul").tabs({fx:{opacity: "toggle"}})
                                       .tabs("rotate", 5000,true);
});

I tried adding this code, right below (and also inside .ready) the code above but to no avail. I confirmed that this function below is receiving the onClick event however the rotating is not stopping.

$("#sws_featured > ul a").click(function(){

            $("#sws_featured > ul").tabs("rotate", 0, false);

  });

Must not be accessing the object correctly... Any ideas?

Answer 1

I've solved this EXACT issue by using the latest jqueryui library (1.8.2 in my case, but I guess 1.7.3 also works for people using jQuery version below 1.4.

And once you start using latest jqueryui version, you have to change the code to:

jQuery("#tabs").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000);

instead of "#tabs > ul".

After that, on any event that you want to stop the rotation, bind the function:

    jQuery(".rotatestopperitem").bind('click', function() {     
        jQuery("#featured").tabs("rotate",0,false);
    });

Answer 2

Saw this solution posted here: http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

You might be able to modify it to work for your context.

Answer 3

This should work:

 $("#sws_featured > ul").tabs().tabs("rotate", 0, false);

Answer 4

Try this

$(function() {

     $('#sws_featured > ul').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 2000);

        });