1

I'm using QuickTabs with a couple of views to show some content within tabs. This works fine.

Now, I want my tabs to automatically cycle. Basically, this issue sums up what I want to do.

The thing is, it partially works. I have two tabs, and it cycles to the second tab, but immediately goes back to the first. I have enough time to see it blinking, but that's it.

Here is the slightly modified code (original code does the same, I just find it nicer):

var rotateSpeed = 5000;
setTimeout(function featureRotate() {
  var active_tab = $('ul.quicktabs-style-basic').find('li.active')
  var next_tab = active_tab.next()
  if(next_tab.length){
    next_tab.find('a').trigger('click')
  }
  else {
    /* remove the following line if you don't want it to cycle */
    $('ul.quicktabs-style-basic').find('li.first a').trigger('click')
  }
  setTimeout(featureRotate, rotateSpeed);
}, rotateSpeed);

Debugging it, it looks like the setTimeout function works when it goes through the else statement, but not when it goes through the if one.

2

Alright, the problem was just plain old Javascript.

The bug made it look like the setTimeout had no delay parameter, which defaults to 0.

After looking more at it, the rotateSpeed variable was not available in the block scope of the featureRotate function, but in its closure.

So I replaced the following:

// In the featureRotate function
setTimeout(featureRotate, rotateSpeed)

With:

// In the featureRotate function
setTimeout(featureRotate, this.rotateSpeed) // Look at this magic :-)

And it works perfectly!

| improve this answer | |
1

You could use setInterval() insead:

function featureRotate() {
  var active_tab = $('ul.quicktabs-style-basic').find('li.active')
  var next_tab = active_tab.next()
  if(next_tab.length){
    next_tab.find('a').trigger('click')
  }
  else {
    /* remove the following line if you don't want it to cycle */
    $('ul.quicktabs-style-basic').find('li.first a').trigger('click')
  }
}

var rotateSpeed = 5000;
setInterval("featureRotate()", rotateSpeed);
| improve this answer | |
  • Not working. Exact same problem. – Florian Margaine Feb 29 '12 at 9:27
  • Btw, your code doesn't work :). You have to use setInterval(featureRotate, rotateSpeed). – Florian Margaine Feb 29 '12 at 9:41
  • 1
    I just wrote something from memory, never test it. But I'm glad I gave a starting point :) – Marius Ilie Feb 29 '12 at 9:47
  • 1
    Dude, I know it didn't work. I just said it was a starting point for you... – Marius Ilie Feb 29 '12 at 10:21
  • 1
    Whatever. Starting point means something does that doesn't work but puts you on the right track and can continue from there. I just wanted to help... next time I'll stay aside. – Marius Ilie Feb 29 '12 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.