0

I'm building a TV listing and I'm using quicktabs module with tabs:

  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday
  • Saturday
  • Sunday

Every tab shows a node that have a TV listing.

Is it possible these tabs to be shown by date/day?

Example: today is Monday, so when a user enters the page for TV schedule the active tab will be Monday.

I've inspected the tab links and I find out that every tab has additional link to the main URL.

Example: The first tab (in mine case - Monday) has /program?qt-quicktabs_tv_schedule=0#qt-quicktabs_tv_schedule

The second tab (in my case - Tuesday) has /program?qt-quicktabs_tv_schedule=1#qt-quicktabs_tv_schedule

etc.

EDIT:

I've tried this code:

(function($){


$(document).ready(function(){
var d = new Date();
var n = d.getDay();
$(".quicktabs-tabs li").removeClass('active');
$('#quicktabs-tab-quicktabs_tv_schedule-0' + n).parent().addClass('active');


});
})(jQuery);

The removing active class is working, but the days changing based on

var d = new Date();
var n = d.getDay();

it's not working. Maybe I'm missing something...

EDIT 2:

Here's what I've tried:

     (function($){


        $(document).ready(function(){
        var d = new Date();
        var n = d.getDay()-1;
        if ( n == -1) {
        n = 6;
        };

        $(".quicktabs-tabs li").removeClass('active');
        $('#quicktabs-tab-quicktabs_tv_schedule' + n).parent().addClass('active');
        $('.quicktabs-tabpage').addClass('quicktabs-hide');
        $('#quicktabs-tab-page-id-' + n).removeClass('quicktabs-hide');


        });

})(jQuery);

With this code it simply hides the default tab.

  • do you want it to sort or just make the Current day active? – Mohammed Shameem Oct 7 '13 at 7:30
  • I just want make the current day active. – user2519032 Oct 7 '13 at 7:33
  • $('#quicktabs-tab-quicktabs_tv_schedule-0' + n).parent().addClass('active'); change this to $('#quicktabs-tab-quicktabs_tv_schedule-' + n).parent().addClass('active'); this. don't have to give the 0 – Mohammed Shameem Oct 16 '13 at 13:09
  • Thank you. It's working, however I'm still trying to figure out how to set Monday as 0, 'cos right now it's displaying Thursday. – user2519032 Oct 16 '13 at 13:24
  • Ahh YES, I've changed the position of the tab and now it's displaying GREAT! Thank you so much! – user2519032 Oct 16 '13 at 13:25
2

You can use javascript for this.

Each quicktab "A" tag has an ID something like quicktabs-tab-name-0 (replace name with the quicktab name you have given)

You can use some thing like the below code to get the current day of the week

var d = new Date();
var n = d.getDay();

this would return a number which would be something from 0 to 6 where 0 Represents Sunday and so on.

The active class is set to li tag with in which the a tag is placed.

So first we need to remove the active class from all the li with in quick tab this can be done with

$(".quicktabs-tabs li").removeClass('active');

Next we need to add the active class to the current day's tab for which you could do something like.

$('#quicktabs-tab-name-' + n).parent().addClass('active');
// n is the day number we got from the code above. 

Next you need to enable the tab page for the corresponding tab for that you would do the following. The first one would add the hide class to all tab pages and the second code removes the hide class from the current div.

$('.quicktabs-tabpage').addClass('quicktabs-hide');
$('#quicktabs-tab-page-id-' + n).removeClass('quicktabs-hide');

That should do it.

Just make sure that the tabs are arranged form Sunday to Saturday. So that quicktab ids also get the same numbering. If you want a different order then you can offset the number accordingly by adding the offset value and then getting the reminder value of a division by 7.

So in effect the complete code would be

var d = new Date();
var n = d.getDay();
$(".quicktabs-tabs li").removeClass('active');
$('quicktabs-tab-name-' + n).parent().addClass('active');
$('.quicktabs-tabpage').addClass('quicktabs-hide');
$('#quicktabs-tab-page-id-' + n).removeClass('quicktabs-hide');

This would go inside the document ready function.

  • Hi, Mohammed. I'm sorry for the late answer. I've tried your code, but it still didn't work. I'll edit the main thread, so I can show you what did I tried. – user2519032 Oct 15 '13 at 7:35

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.