0

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.

2
Contributors
6
Replies
26
Views
3 Years
Discussion Span
Last Post by Troy III
1

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.

Edited by Troy III

0

here is what i tried:

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

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

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
0

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
0

'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 );}
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.