Stop timer on hover

[patk570]

Hey guys, I have a script that switches between tabs..It works perfectly, but what i am needing is a way for the script to stop when I have my mouse on the tab or content for the tab. I am using bootstrap and here is my fiddle with the working tab switch.

[Troy III]

This fiddle is not working on my system but in case it works on an independent page, you can add a function containing clearInterval(tabCarousel); command to a mouseover event on a main tabs wrapper element.

[patk570]

here is a working example of it..I still cannot get the event to stop on mouseover...Click Here

[patk570]

here is what i tried:

$('#tab-carousel').mouseover(function(){

                              clearInterval(tabCarousel);
                              alert('timer stopped');
                              },
                              function(){
                                  timer = setInterval( tabCarousel, 5000);
                                  alert('timer started');
                              });

[patk570]

Ok, so i got it to stop(clear the interVal) but now on mouseout i need it to start back up. I tried this:

$(function() {
var tabCarousel = setInterval(function() {
    var tabs = $('#tab-carousel .nav-tabs > li'),
        active = tabs.filter('.active'),
        next = active.next('li'),
        toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

    toClick.trigger('click');
}, 5000);
//start on hover function
$('#tab-carousel > div').hover(function(){
            window.clearInterval(tabCarousel);
$('#tab-carousel > div').mouseout(function(){
            window.setInterval(tabCarousel,5000);
            });//end hover
    });
});//end function

[patk570]

I fixed it!

$(function() {
var tabCarousel = setInterval(function() {
        var tabs = $('#tab-carousel .nav-pills > li'),
            active = tabs.filter('.active'),
            next = active.next('li'),
            toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

        toClick.trigger('click');
    }, 5000);
    //start on hover function
$('#tab-carousel > div ').hover(
                function(){
                    window.clearInterval(tabCarousel)
                },
                function(){
                    tabCarousel = setInterval(function() {
        var tabs = $('#tab-carousel .nav-pills > li'),
            active = tabs.filter('.active'),
            next = active.next('li'),
            toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

        toClick.trigger('click');
    }, 5000);
                }
                );
});//end function

[Troy III]

'tabCarousel' variable points to the timer not to its argument.
You need a handle for the function in order to be able to call it ., a named function.

illustrating in JS (DOM 0):

function carousel() { 'function body'; }

var tabCarousel = setInterval( carousel, 5000 );

[tabsContainer].onmouseover = function() { clearInterval( tabCarousel );}
[tabsContainer].onmouseout = function() { tabCarousel = setInterval( carousel, 5000 );}