Ajax Tabs

Hey guys.

I'm wondering if anyone could help me with my javascript code.

I have some ajax tabs which work great and the tab system works great too, I just need to make it so that when I refresh the page it remembers which tab my user was last on and loads that when the page reloads.

Any help would greatly be appreciated, I've tried to do it over 10 times, I just can't get my head around it and it's starting to give me a headache.

Would someone be able to help me with this, here is my Javascript code (without saving implementation):

var containerId = '#tabs-container';
var tabsId = '#tabs';

$.fn.slideFadeToggle = function(speed, easing, callback){
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

function SetLoading(container,item){
    $(container).html('<div class="center"><img class="loadingbar" src=" http://gsrv.co.uk/resources/images/loading.gif " alt="Loading.." /><br /><span class="tiny">Loading ' + item + '</span></div>');
};

function capitaliseFirstLetter(string){
    return string.charAt(0).toUpperCase() + string.slice(1);
};

$(document).ready(function(){
    // if($(tabsId + ' LI.current A').length > 0){
    loadTab($(tabsId + ' LI.current A'));

    $(tabsId + ' A').click(function(){
        if($(this).parent().hasClass('current')){
            return false;
        };

        $(tabsId + ' LI.current').removeClass('current');
        $(this).parent().addClass('current');

        loadTab($(this));
        return false;
    });
});

function loadTab(tabObj){
    if(!tabObj || !tabObj.length){
        return;
    };

    var extension = tabObj.attr('href');
    var stripextension = extension.replace(".php", "");
    var capextension = capitaliseFirstLetter(stripextension);
    SetLoading(containerId,capextension + " Page");
    document.title = "GServers Community - " + capextension;

    $(containerId).load(tabObj.attr('href'), function(){
        $(containerId).hide().slideFadeToggle();

    });

    if(tabObj.attr('href') == "join.php"){
        setTimeout('loadStatistics();',500);
    };
};

function loadStatistics(){
    SetLoading('#statcontent',"Community Statistics");
    $('#statcontent').load('stats.php');
};

function ToggleBox(element){
    $(element).slideFadeToggle();
};

My HTML looks like this:

<ul class="mytabs" id="tabs">
      <li class="current"><a href="news.php"><img class="mnuicon" src="resources/icons/news.png" alt="News"/> News</a></li>
      <li><a href="join.php"><img class="mnuicon" src="resources/icons/join.png" alt="Join"/> Join</a></li>
      <li><a href="servers.php"><img class="mnuicon" src="resources/icons/servers.png" alt="Servers"/> Servers</a></li>
      <li><a href="downloads.php"><img class="mnuicon" src="resources/icons/downloads.png" alt="Downloads"/> Downloads</a></li>
      <li><a href="donate.php"><img class="mnuicon" src="resources/icons/donate.png" alt="Donate"/> Donate</a></li>
      <li><a href="purchase.php"><img class="mnuicon" src="resources/icons/purchase.png" alt="Purchase"/> Purchase</a></li>
      <li><a href="about.php"><img class="mnuicon" src="resources/icons/about.png" alt="About"/> About</a></li>
</ul>

Or if someone could point me in the right direction, would be greatly appreciated.

Topic Participants
gexeh

Ajax Tabs

Ajax Tabs

Topic Participants

gexeh