CODEWITHSUNDEEP
javascripttabsjquery-ui-tabs
Tim
Tim

Reputation: 25

Stop auto tab switching in javascript on click

I found this article helpful for what I was needing to do, which was have a slideshow of sorts with a tab and tab_container using JavaScript. The code works great:

Automatic tab switch in javascript or jquery

However, what I want it to do is if you let the page run, it keeps rotating between the tabs. But if a tab is manually clicked on (example, they want to read the content on that tab) it stops the auto-rotation of the tabs for the duration of while they are on that webpage. If the page is refreshed, or they go back to the page, it starts the tab rotation again.

I'm not sure the Javascript code that I can add to the above example to make the auto-rotation stop.

Thanks in advance for the help!

Upvotes: 0

Views: 1334

Answers (1)

bowheart
bowheart

Reputation: 4686

You can use clearInterval to stop the setInterval function from running. setInterval returns an ID and you can pass that ID to clearInterval to stop it, e.g.

var intervalID = setInterval(function() {
    ....
clearInterval(intervalID);

So just make the code

var intervalID = setInterval(function() {
    ....

tabs.on('click', 'a', function(e) {
    clearInterval(intervalID);
    $(this).trigger('slides.swap');
    e.preventDefault();
});

I'd also change the setInterval function from triggering a click to just straight-up triggering slides.swap, so that you know the difference between a triggered click and a user's click:

$('a:eq('+idx+')').trigger('slides.swap');

Here's the updated Fiddle from that question.

Upvotes: 1

Related Questions