Posted by ckng on February 24, 2012 at 4:56pm
12 followers
| Project: | Quick Tabs |
| Version: | 7.x-3.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs review |
Issue Summary
The code provides a js only solution to tab and accordion history, i.e. whichever quicktabs tab or accordion clicked will be remembered via cookie so when you refresh or navigate to other pages, the correct tab and accordion will be 'loaded' (virtually clicked).
Drupal.behaviors.quicktabsHistory = {
attach: function(context, settings) {
// enable accordion memory
$('.quick-accordion', context).each(function() {
var id = $(this).attr('id');
var accordion = $.cookie(id);
if (accordion != '') {
$(this).find('h3 a[href="' + accordion + '"]').click();
}
$(this).find('h3 a').click(function() {
$.cookie(id, $(this).attr('href'));
});
});
// enable tab memory
$('.quicktabs-wrapper', context).each(function() {
var id = $(this).attr('id');
var tab = $.cookie(id);
if (tab != '') {
$(this).find('ul.quicktabs-tabs a#' + tab).click();
}
$(this).find('ul.quicktabs-tabs a').click(function() {
$.cookie(id, $(this).attr('id'));
});
});
}
};If you do not have script.js or an empty one, wrap the above code with
(function ($) {
// the code above
})(jQuery);Inspiration from similar D6 thread #354199: Remember last clicked tab
Comments
#1
#2
Hello,
this may sound silly, but where exactly should I put this script?
Thank you in advance
#3
Of course I would hope this will get into the module. Otherwise, just include it in your theme.
#4
#2 + Bump
#5
To include as part of your theme
- add a script.js file inside your theme folder, if not already have one
- include the script.js into your theme .info file, if not already have one
- add the code into existing script.js or the new script .js you just created
- clear theme cache, or visit admin/appearance
#6
I followed your steps, but it's not working.
#7
Worked for me. Added it in my theme.
Thanks!
#8
Hi, i have the script.js in my theme, i see that drupal is loading script (in source code) but it doesn't work at all. If I reload page, quicktabs is still at default position. I was trayed dev and also stable version.
#9
@CinemaSaville, @gynekolog
Make sure there are no other javascript error. That's the only thing I could think of which prevent it from working or you've alter the quicktab output.
#10
@ckng
I'm getting this error ->
#11
@gynekolog
I've added additional note on the first post, you are missing the jquery wrapper
#12
It works now, thank you!
#13
Next problem.. history is working only if click on main items in menu and not for child ->
edit: excuse my english and my error in word "history" on picture.
#14
Thnx, ckng. You da man!
One problem. I was getting a JS error that $.cookie was not defined. Added the cookie jQuery plugin from:
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
Now it works.
Thnx again,
Kieran
#15
I tested the code in the issue with the plugin mentioned on comment #14 and it works half the time for me. Sometimes it remembers the correct tab, sometimes it doesnt. Please see it working here: www.profnews.nl (TOP 5 ACUTELE ARTIKELEN block on the right sidebar)
#16
I had to first remove cookie after clicking a tab to make it work consistently. Also I added the parameter "path" to make sure the cookie works in all the pages of the website.
Here is the revised JS code that is working for me (I only tested for tabs, not accordions):
(function ($) {
Drupal.behaviors.quicktabsHistory = {
attach: function(context, settings) {
// enable accordion memory
$('.quick-accordion', context).each(function() {
var id = $(this).attr('id');
var accordion = $.cookie(id);
if (accordion != '') {
$(this).find('h3 a[href="' + accordion + '"]').click();
}
$(this).find('h3 a').click(function() {
$.removeCookie(id, {path: '/'});
$.cookie(id, $(this).attr('href'), {path: '/'});
});
});
// enable tab memory
$('.quicktabs-wrapper', context).each(function() {
var id = $(this).attr('id');
var tab = $.cookie(id);
if (tab != '') {
$(this).find('ul.quicktabs-tabs a#' + tab).click();
}
$(this).find('ul.quicktabs-tabs a').click(function() {
$.removeCookie(id, {path: '/'});
$.cookie(id, $(this).attr('id'), {path: '/'});
});
});
}
};
})(jQuery);