jQuery: random active tab??

Question

Hey there- I need to have a tab interface that has a different "active" tab every time the page loads. There will be advertiser content in each of the 4 tabs, so this is a way to keep things "fair". I am familiar with the tabs part...just need pointed in the right direction getting different "active" tabs to display on page load. Thanks!

Answer 1

Not that familiar with the tabs yet, but you can count items from Javascript and then select one item by random using Javascript's

var randomnumber=Math.floor(Math.random()*tabCount);

and then use the randomnumber as "tab index".

Answer 2

Just use a javascript random object.

var randomnumber=Math.floor(Math.random()*3) //0-3

Then set the id of each tab to be based off of that random number. So if the random number generates a 1, then show tab 2 as the active tab.

Answer 3

You could let the SERVER which generates the actual content add a "selected default" to the tab in the rendered HTML output.

Answer 4

Using Bryan Denny's answer, here is my almost final code:

// Make sure none of the tabs are active
$('.randomiza-tab1').removeClass('ui-tabs-selected');
$('.randomiza-tab2').removeClass('ui-tabs-selected');
$('.randomiza-tab3').removeClass('ui-tabs-selected');
$('.randomiza-tab4').removeClass('ui-tabs-selected');

// Make sure none of the content is active
$('.randomiza-bucket1').addClass('ui-tabs-hide');
$('.randomiza-bucket2').addClass('ui-tabs-hide');
$('.randomiza-bucket3').addClass('ui-tabs-hide');
$('.randomiza-bucket4').addClass('ui-tabs-hide');   


// Find a random number between 0 and 3
var randomnumber=Math.floor(Math.random()*4);

// Add and remove the correct style classes based on random number
switch (randomnumber) {
    case 0 :
        $('.randomiza-tab1').removeClass('hidden').addClass('ui-tabs-selected');
        $('.randomiza-bucket1').removeClass('ui-tabs-hide');            
        break;

    case 1 :
        $('.randomiza-tab2').removeClass('hidden').addClass('ui-tabs-selected');
        $('.randomiza-bucket2').removeClass('ui-tabs-hide');            
        break;

    case 2 :
        $('.randomiza-tab3').removeClass('hidden').addClass('ui-tabs-selected');
        $('.randomiza-bucket3').removeClass('ui-tabs-hide');            
        break;

    case 3 :
        $('.randomiza-tab4').removeClass('hidden').addClass('ui-tabs-selected');
        $('.randomiza-bucket4').removeClass('ui-tabs-hide');            
        break;

    default :
        $('.randomiza-tab1').removeClass('hidden').addClass('ui-tabs-selected');
        $('.randomiza-bucket1').removeClass('ui-tabs-hide');            
}

Answer 5

GREAT! I got it down to 3 lines! Thanks @Bryan Denny and @GeReV!

JS/jQuery Code:

    // Count the number of tabs
    var countTabs = $('.tab_randomiza').children().size(); 

    // Find a random number between 0 and the number of tabs (countTabs)
    var randomizeIt = Math.floor(Math.random()*(countTabs));

    // Tell the tabs which one to be active
    $('#randomiza_wrapper').tabs({ selected: randomizeIt });

HTML:

    <div class="titlebar titlebar_secondary">
        <h3>Test Bucket</h3>
    </div><!-- end .titlebar_secondary -->
    <div id="randomiza_wrapper">
        <ul class="tab_header tab_randomiza">
            <li class="randomiza-tab1 ui-tabs-selected"><a href="#one">one</a></li>
            <li class="randomiza-tab2"><a href="#two">two</a></li>
            <li class="randomiza-tab3"><a href="#three">three</a></li>
            <li class="randomiza-tab4"><a href="#four">four</a></li>
        </ul>

        <div id="one" class="bucket_secondary randomiza_bucket1">
             <ul class="story_list sidebar_story_list">
                <li>
                    Content One
                </li>
            </ul>

        </div><!-- end #one -->


        <div id="two" class="bucket_secondary preventFOUC randomiza_bucket2">
            <ul class="story_list sidebar_story_list ">
                <li>
                    Content Two
                </li>
            </ul>
        </div><!-- end #two -->

        <div id="three" class="bucket_secondary preventFOUC randomiza_bucket3">
            <ul class="story_list sidebar_story_list ">
                <li>
                    Content Three
                </li>
            </ul>
        </div><!-- end #three -->

        <div id="four" class="bucket_secondary preventFOUC randomiza_bucket4">
            <ul class="story_list sidebar_story_list ">
                <li>
                    Content Four
                </li>
            </ul>
        </div><!-- end #four -->
    </div>

</div><!-- end #top_jobs -->