Automatically scroll/cycle through tabs

Hi WorldFallz,
I'm changing this to a feature request as I had given some thought to this idea and would like to include it in the next release of Quick Tabs. I can't say for sure when it will be available but if you're in a hurry and would like to start having a go yourself, here's the js code from a different custom module I had built which displays auto-rotating tabbed content (the content for that module was not in the form of views or blocks but I'm sure the jquery can be refactored for the purposes of QT blocks)...
The code makes the tabs auto-rotate but you can also have a pause and play button to control them. It would obviously need to be re-structured fairly drastically because this would have to be an option per QT block.
I changed some lines of the code that were a bit confusing, hopefully it'll make sense to you...

$(document).ready(function(){
  $('ul.feature_tabs').each(function(){
    var i = 0;
    $(this).find('li a').each(function() {
      this.myTabIndex = i++;
    });
  });
  
  var oldFeature = 0;
  var currentFeature = 0;
  var featureCount = $('div.feature_image').length;
  var featureTimeout;
  var firstId = $('div.feature_image').get(0).id;
  var tabTimeout = Drupal.settings.featuretabs.timeout;
  var initialised = false;
  $('ul.feature_tabs li').removeClass('active');
  //$('div.test').html(oldFeature);
  if (!initialised) {
    $('div.feature_image').hide();
    $('div.feature_image:eq('+currentFeature+')').show();
  }
  $('ul.feature_tabs li:eq('+currentFeature+')').addClass('active');
  var rotateInProgress = false;
  
  var featureRotate = function() {
    if (!rotateInProgress) {
      initialised = true;
      rotateInProgress = true;
      featureTimeout = false;
      currentFeature = (oldFeature + 1) % featureCount;
      $('div.feature_image:eq('+oldFeature+')').fadeOut('slow');
      $('ul.feature_tabs li').removeClass('active');
      $('div.feature_image:eq('+currentFeature+')').fadeIn('slow', function() {
        $('ul.feature_tabs li:eq('+currentFeature+')').addClass('active');
        rotateInProgress = false;
        if (!featureTimeout) {
          featureTimeout = setTimeout(featureRotate, tabTimeout);
        }  
      });
      oldFeature = currentFeature;
      //$('div.test').html(oldFeature);
    }
  };
  
  featureTimeout = setTimeout(featureRotate, tabTimeout);

  
  var clickFunction = function() {
    var clickedFeature = this.myTabIndex;
    clearTimeout(featureTimeout);
    featureTimeout = false;
    if (!rotateInProgress) {
      $('div.feature_image').hide();
      $('div.feature_image:eq('+clickedFeature+')').show();
      oldFeature = clickedFeature;
      $('ul.feature_tabs li').removeClass('active');
      $('ul.feature_tabs li:eq('+clickedFeature+')').addClass('active');
    }
    return false;
  };
  
  var pauseFunction = function() {
    clearTimeout(featureTimeout);
    featureTimeout = false;
    return false;
  };
  
  var playFunction = function() {
    featureTimeout = setTimeout(featureRotate, 150);
    return false;
  };

  $('ul.feature_controls a.pause').bind('click', pauseFunction);
  $('ul.feature_controls a.play').bind('click', playFunction);

  $('ul.feature_tabs li a').bind('click', clickFunction);

});

Actually I'd prefer to steer clear of plugins and do this with straight jQuery effects (fade, slide, etc). The options offered would be things like whether to display the titles on the tabs (as on www.spin.com - top left block), or just have numbers (as is often done with auto-rotating content) or dots (as on www.7x7sf.com - though this might be stretching things a bit far), whether to have pause on hover and play on mouseout or just pause and play buttons, and things like that - I think those are the most important options rather than just different transition effects.
I hope that's not too negative a reply after you spending time on the cycle plugin (which does look great, I just don't want such dependencies).
Thanks for your help with this :-)

Katherine

This is a great module and seems more stable than jcarousel, nodecarousel, and panels carousel. I'd love to see the automated scrolling feature also.

just wondering if this feature is going to bei n the next version after 5.x-1.4?

Ditto #5, this module really rocks compared to others and I'd love to see this as a feature, along with transitions.

(Updated title to make this easier to find)

Moving new features to 3.x version

Would love this functionality, it has been requested fro some time.
I cannot see the 6.x-3.x.dev version on the module download page. When will it be available?

subscribing

I just threw this together and thought others might be interested. It's not a proper patch, but can be easily applied to any theme by dropping it in script.js in your theme folder. All it does is rotate through the tabs and then cycle back around when it gets to the end. No fancy effects, just simulated mouse clicks.

You'll need to make 2 changes:
1) replace ul.quicktabs-style-spotlight with the corresponding name of your QuickTabs style. Mine is a custom style called "spotlight", so just change spotlight to the name of your style. Make the change in two places.
2) replace #quicktabs-home with the corresponding name of your QuickTabs block.

one more caveat: I had to fiddle with the CSS for that #quicktabs-home div to get the mouseover part working. Specifically, I had to set the height and width. If you don't do that, the rotation will work but it won't pause on mouseover.

$(document).ready(function(){
  var rotateSpeed = 5000;
  var featureTimeout = setTimeout(featureRotate, rotateSpeed);

  var featureRotate = function() {
    var active_tab = $('ul.quicktabs-style-spotlight').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-spotlight').find('li.first a').trigger('click');
    }

    featureTimeout = setTimeout(featureRotate, rotateSpeed);

    return false;
  };

  /* disable auto-rotate when the mouse is over the quicktabs div */
  $("#quicktabs-home").bind("mouseenter", function() {
    clearTimeout(featureTimeout);
    featureTimeout = false;
    return false;
  } ) . bind("mouseleave", function() {
    featureTimeout = setTimeout(featureRotate, rotateSpeed);
    return false;
  } );
});

@ maintainers - If you update me on your development plan and advise me on the UI, I can work on polishing this, generalizing it, and making a suitable patch. Just wanted to get something working, in the meantime, without hacking the module.

@sleepcamel: my current plan is to work on the D7 port and make all the crazy style features implemented with a pluggable system..
hopefully for most ideas the implementation is already part of D7 core with jQuery UI (check rotate on http://jqueryui.com/demos/tabs/#methods) so we just need to enable the features..

after that I will probably have some ideas how it should be done in D6, but I doubt that I will have the time to implement it..

but adding new features without hacking the module is always a good solution..

@sleepcamel - does your theme script.js code only work with the 6.x-3.x.dev version of the module? I tried to get it to work with the 6.x-2.0-rc4 version and it wasn't doing anything.

It would be great to have this functionality.

Thanks

@cbassig, I wrote it while using 6.x-2.0-rc3, so I'd assume it would work for rc4 as well. I'd read through my steps again to make sure you didn't miss any of the edits - it definitely won't work if you just drop it in without editing to fit your setup. If your site is visible somewhere give me a link and I can take a look (but not until next week, most likely).

Also, I'm not sure if all themes automatically include script.js, so make sure it's actually being included (or try putting it inside a script tag in a .tpl file). I'm using a custom subtheme of blueprint, which seems to include it automatically.

@cbassig - I'm using rc4 and that script worked once I changed the order of the setTimeout call to after the definition of the featurerotate function. Otherwise, it threw a javascript error saying that the setTimeout didn't work.

$(document).ready(function(){
		  var featureRotate = function() {
			var active_tab = $('ul.quicktabs-style-sky').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-sky').find('li.first a').trigger('click');
			}

			featureTimeout = setTimeout(featureRotate, rotateSpeed);

			return false;
		  };

  /*MOVED THESE VARIABLES SO FEATUREROTATE IS DEFINED!*/
		  var rotateSpeed = 5000;
		  var featureTimeout = setTimeout(featureRotate, rotateSpeed);

		  /* disable auto-rotate when the mouse is over the quicktabs div */
		  $("#quicktabs-2").bind("mouseenter", function() {
			clearTimeout(featureTimeout);
			featureTimeout = false;
			return false;
		  } ) . bind("mouseleave", function() {
			featureTimeout = setTimeout(featureRotate, rotateSpeed);
			return false;
		  } );
		});

@sleepcamel - Thanks, I did make sure of the edits and the theme did have a script.js. I was able to get it to work enough for the time being through another route. (sorry I forgot to respond earlier)

@kaynenh - Thanks for the information. I will give this a try to see if it solves the problem when I have time to go back and work on that particular project.

I added some fade effects... which are kind of generic...
Is there any way to add better transitions... without a plugin?

$(document).ready(function(){
  var featureRotate = function() {
var active_tab = $('ul.quicktabs-style-phylactere').find('li.active');
var next_tab = active_tab.next();

if(next_tab.length){
  next_tab.find('a').trigger('click');
  $("#quicktabs_container_view__slideshow__block_1").hide();
$("#quicktabs_container_view__slideshow__block_1").fadeIn("slow");
} else {
  /* remove the following line if you don't want it to cycle */
  $('ul.quicktabs-style-phylactere').find('li.first a').trigger('click');
  $("#quicktabs_container_view__slideshow__block_1").hide();
$("#quicktabs_container_view__slideshow__block_1").fadeIn("slow");
}

featureTimeout = setTimeout(featureRotate, rotateSpeed);

return false;
  };

  /*MOVED THESE VARIABLES SO FEATUREROTATE IS DEFINED!*/
  var rotateSpeed = 5000;
  var featureTimeout = setTimeout(featureRotate, rotateSpeed);

  /* disable auto-rotate when the mouse is over the quicktabs div */
  $("#quicktabs_container_view__slideshow__block_1").bind("mouseenter", function() {
clearTimeout(featureTimeout);
featureTimeout = false;
return false;
  } ) . bind("mouseleave", function() {
featureTimeout = setTimeout(featureRotate, rotateSpeed);
return false;
  } );
});

Thanks for the help. I am writing for instructions on how to implement this. I am a newbie and patches - so I am not sure which file I need to add this code to and where.

Also, will this work for the 6.x-3.x-dev version?

Thanks

I was able to figure this out but have one question - HOW DO I STOP THE AUTO SCROLL - when I have clicked on a tab or am hovering over the tab?

I read above and have tried to adjust the css file, but it is not helping. Any advice is helpful.

Thanks

Bobby

Hi:
I´ve included the code above into quicktabs.js, and it works fine but only if i´m connected as administrator ...
any help?
I´m an absolut newbie
Thanks for all your effortS!

@recardoserra74 - not sure how the admin part fits in, but you should definitely NOT be pasting this into quicktabs.js, because then you won't be able to upgrade your quicktabs module without losing your changes. You should instead put it in your theme directory. If your theme doesn't already have a .js file, create script.js, paste in the code, and then add that file to the list in your theme's .info file.

Hi Brad:
- Script.js created with the code and put it in my theme directory (didn´t exist any .js in that folder)
- added the line: scripts[] = script.js in my theme´s .info file

Now i can´t see rotation in quicktabs neither logged in or not ...
any suggestion...?

@ricardo - First you should confirm that the .js is actually being included by inspecting the HTML being output by Drupal. This will either by really obvious or somewhat obfuscated, depending on your caching settings at /admin/settings/performance. If it's not being included, you probably just need to clear your cache. If it is being included but isn't working, I don't have an easy answer... you just need to debug it.

Here we have different approach, but as in here, only "almost there"

http://drupal.org/node/461266

How about to randomize tabs apperance?

Suggestion for people doing ad hoc implementations: Take a look at the js_injector module.

(also, take this as an implicit endorsement of the concept -- we have been using a lot of quicktabs, due to their simplicity, and adding a baked-in scrolling capability would be wonderful.)

+1 from me for baked in autorotation feature

Finally got that working!

Thanks for the code up there. Actually, none of them worked because of a little bug.

It was actually just a little change to #19's code that was needed. Maybe it's because I already use Views Slideshow on this page, but quicktabs just wasn't cycling.

I changed $(document).ready(function(){ (line 1) to Drupal.behaviors.QuickTabsBehavior = function() {. And it suddenly worked like a charm!

(new JS code attached)

EDIT : uh, looks like d.o doesn't like my attached files. So, just FYI, there are two lines modified : the first and the last. New lines :

Drupal.behaviors.QuickTabsBehavior = function() {
...
};

Here is my version, nothing major has changed, replace "#quicktabs_container_ID" with your quicktabs container ID :

Drupal.behaviors.QuickTabsAutoRotate = function() {
  var featureRotate = function() {
    var activeTab = $('#quicktabs_container_ID ul.quicktabs_tabs').find('li.active');
    var nextTab = activeTab.next();
    var innerContent = $("#quicktabs_container_ID .quicktabs_tabpage .content > *")

    if(nextTab.length){
      nextTab.find('a').trigger('click');
      innerContent.hide();
      innerContent.fadeIn(1000);
    } 
    else {
      $('#quicktabs_container_ID ul.quicktabs_tabs').find('li.first a').trigger('click');
      innerContent.hide();
      innerContent.fadeIn(1000);
    }

    featureTimeout = setTimeout(featureRotate, rotateSpeed);

    return false;
  };

  // Define delay time here
  var rotateSpeed = 5000;
  // Comment the next line to disable auto-rotate
  var featureTimeout = setTimeout(featureRotate, rotateSpeed);

  // Disable auto-rotate when the mouse is over the quicktabs div
  $("#quicktabs_container_ID").bind("mouseenter", function() {
    clearTimeout(featureTimeout);
    featureTimeout = false;
    return false;
  } ) . bind("mouseleave", function() {
    featureTimeout = setTimeout(featureRotate, rotateSpeed);
    return false;
  } );
};

I needed to alter this code a bit to get it working on Drupal 7, hopefully I can save someone else some time by sharing this. Thank you to all who shared theirs.
Replace #quicktabs_container_ID with your quicktabs ID.

(function($) {
Drupal.behaviors.quicktabs_rotater = {
  attach: function(context, settings) {
    var featureRotate = function() {
      var activeTab = $('#quicktabs_container_ID ul.quicktabs_tabs').find('li.active');
      var nextTab = activeTab.next();
      var innerContent = $("#quicktabs_container_ID .quicktabs_tabpage > *")

      if(nextTab.length){
        nextTab.find('a').trigger('click');
        innerContent.hide();
        innerContent.fadeIn(1000);
      }
      else {
        $('#quicktabs_container_ID ul.quicktabs_tabs li a').first().trigger('click');
        innerContent.hide();
        innerContent.fadeIn(1000);
      }

      featureTimeout = setTimeout(featureRotate, rotateSpeed);

      return false;
    };

    // Define delay time here
    var rotateSpeed = 7500;
    // Comment the next line to disable auto-rotate
    var featureTimeout = setTimeout(featureRotate, rotateSpeed);

    // Disable auto-rotate when the mouse is over the quicktabs div
    $("#quicktabs_container_ID").bind("mouseenter", function() {
      clearTimeout(featureTimeout);
      featureTimeout = false;
      return false;
    } ) . bind("mouseleave", function() {
      featureTimeout = setTimeout(featureRotate, rotateSpeed);
      return false;
    });
    }
  };
}(jQuery));

This is awesome, thank you. I'm going to consider replacing my content slider with this.

What is the proper #quicktabs_container_ID format? I tried replacing it with:

10
container-10
container_10
quicktabs_container_10

Cleared cache in each attempt, none is successful.

OK, just realized I was running a wrong version. Upgraded to 6.x-3.0-beta1 and found the #quicktabs_container_ID (#quicktabs_container_latest_news) and it now works, well kinda.

In my case I have a quicktab container with multiple quicktabs in it and also a block in each one of those inner tabs, so my autoscrolling happens on the tab items of the selected container tab (scrolling its items) instead of scrolling from one outer tab to another. Not sure how to get it to work.

The problem must be in one of these lines:

var featureRotate = function() {    
var activeTab = $('#quicktabs_container_container_latest_news ul.quicktabs_tabs').find('li.active'); 
var nextTab = activeTab.next();    
var innerContent = $("#quicktabs_container_container_latest_news .quicktabs_tabpage .content > *")

the above is code from the reply #31 by tsi

Where do I find my quicktabs ID? Do you mean the machine name for the instance? Thanks!

I'm hoping someone can provide some guidance. I'm relatively new to adding JS and this is my first use of quicktabs. I'm using Drupal 7 and trying to use the code from #32.

I have a custom homepage made of panels and the quicktabs block is in one of regions of that panel page. The content from each of 5 tabs is created by Views and exposed as blocks, so I'm adding the block for each view to the tabs.

The machine name for my quicktab instance is home_page_tabs. Which of these lines (if any) would be the correct syntax for "#quicktabs_container_ID with your quicktabs ID.":

• var activeTab = $('#quicktabs_container_home_page_tabs ul.quicktabs_tabs').find('li.active');
• var activeTab = $('home_page_tabs ul.quicktabs_tabs').find('li.active');
• var activeTab = $('#quicktabs_container_container_home_page_tabs ul.quicktabs_tabs').find('li.active');

I've tried all variations (I think) with no luck. I have the code from #32 in separate autotabs.js file in my theme's js folder and have updated my theme's .info file

Any ideas? Thanks in advance.

subscribe

+1 subscribing..

@ wheresjbob - Try adding "quicktabs-" to your quicktabs ID. Like so: #quicktabs-home_page_tabs

I am using D7 & trying to use code from comment #32.
It's not working at all. What I am doing is - adding a JS file to theme & declaring it in .info file. I checked with firebug in header & yeah it's uploaded.
ID for my quicktab is "quicktabs-container-front_page_tab" & so that I replaced all "#quicktabs_container_ID" with "#quicktabs-container-front_page_tab" cleared the cache, but it didn't work at all..

Is there anything which I am missing?

@Rajeevkr - I would guess the ID you would use is "#quicktabs-front_page_tab" (not the one with 'container' in it, since that div does not include the ul.quicktabs-tabs, which is also part of the target).

Speaking of the targets, two other things in #31 needed to get changed for this to work for me in the current version, "quicktabs-tabs" and "quicktabs-tabpage" (note the hyphen instead of underscores, examine your HTML to see which version you'll need to use).

And finally, make sure that whatever scripts.js file you're using is included in your theme's .info file. I just spent 15+ minutes trying to figure THAT one out. :D

Edit: remembered one other thing -- check to make sure that you are not using the AJAX loading method for your tabs. While it may work on a technical level, my tabs did not see to like it at all (weird flashes, showing out of order, etc).

Bumping this to 7.x-3.x because this is a feature request.

With D7 EOL approaching in a month I'm starting to triage the D7 side of quicktabs queue. This doesn't appear to have any code so believe this may not make it, sorry! Thanks though!

If still an issue or needed for 4.0.x (latest branch) feel free to reopen