Automatically scroll/cycle through tabs
WorldFallz - May 29, 2008 - 18:29
| Project: | Quick Tabs |
| Version: | 6.x-3.x-dev |
| Component: | Tab styles |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
First, let me THANK YOU for a great module-- i've been trying to get this functionality for some time now (the other modules/solutions just didn't seem to work for me).
With this module I've gotten 99% of what I'm after-- so kudos and a big thanks.
My question is this, I'm trying to figure out how to very simply automate paging through the tabs-- nothing fancy, no plugins, just pure jquery. I'm assuming I just need to manipulate setting the "active" class on a timed basis somehow, but I'm not getting anywhere. If you have any suggestions or ideas to point me in the right direction, i'd be thrilled to contribute a patch back.
#1
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);
});
#2
This is great-- more than I hoped for. I'm hoping to have some time to play around with it this weekend.
Not being one to be able to stop when i've gotten something 99% of the way completed, I continued playing with this into the night last nite. I finally cried uncle and went browsing around plugins.jquery.com and started playing around with the cycle plugin. It seems to be one of the higher quality plugins-- the core version (fade effect only) weighs in (packed) at 6kb and the full version (with all 27 transition effects) weighs in (also packed) at 10kb. Not bad for all that it does.
I managed to get close to the effect I was looking for with some css trickery and 1 line of jquery:
$('.quicktabs_main').cycle({delay: -6000,
timeout: 6000,
fx: 'scrollLeft',
speed: 2500,
pause: 1
});
I'm not exactly 100% thrilled with this solution-- it feels hackish as i had to hide the tabs completely with css and use block titles instead of actually animating the styled quicktabs tabs. I might be able to fix this with some more time and/or changing the html output of quicktabs.
My question is this-- would you prefer to add simple pure jquery transitions (fade, slide) based on your code above, or enable a "use cycle plugin" option and provide a sensible interface to the plugin options. I'm torn-- I like the flexibility of cycle but I also like when modules are free of dependencies. As it's your module and i'd rather spend my time on something I can contribute back as a patch-- which direction would you prefer?
#3
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
#4
Nope--- it's not a negative reply at all. I agree with your preference. I tend to steer away from modules with dependencies whenever possible (though ironically, both my modules have them, lol).
But don't thank me yet-- i'm still learning jquery and it may take a little while for me to figure out how to integrate this code into the module. It will be a good learning experience though.
#5
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.
#6
just wondering if this feature is going to bei n the next version after 5.x-1.4?
#7
i haven't been able to get it to work natively yet (i'm using the jquery cycle plugin atm) and my work has taken a different turn for the moment. i do plan to resume trying to get a patch together once i have some free time. in the meantime, you can always use cycle to add it manually.
#8
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)
#9
Moving new features to 3.x version
#10
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?
#11
subscribing
#12
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.
#13
@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..