I have a Carousel which uses the setInterval() to toggle between the tabs every 4 seconds. I now want to stop this auto-toggle on click of any particular tab.
The clearInterval() is getting called only after a cycle, and not immdetiately when a tab is selected.
Please point me to what is wrong in my function call.

jsfiddle.net/qjmDU/14 is the JS fiddle where I have my html and jquery. I am guessing that the problem is the following code being used in the wrong place.

$(this).on("click", function (event) {
   console.log("After clear interval" + stopVar);

Your fiddle at (http://jsfiddle.net/qjmDU/14/) isn't doing anything.
Can you please provide a working example so that we can try fixing the delay you are having issues with?

Member Avatar

There's no "toggle" / autoadvance in the jsfiddle example you gave (Chrome/Win 7)

The initial timeToStand is a problem...

$(document).ready(function ()

var stopVar;

function initCarousel(timeToStand)
    // Grab the tab links and content divs from the page
    var tabListItems = $('#tabsCarousel li');
    var selectedTab = $('#tabsCarousel').find('li.on');
    var index = $(selectedTab).index();
    var timeInMilliSecs = (timeToStand * 1000);


Gives NaN - so set


Or however quickly (in seconds) it's supposed to advance

BUT, it still only advances to the next tab and then stops.

Also you have...

<div class="tabContentCarousel" id="advantages" onclick="showTabCarousel()">
    <p>Advantages of tabs</p>    

You're using jQuery, so you can get rid of inline js easily...


I haven't checked the rest of it...