jQuery: part of a function not executing

Question

Hi. I have a tabbed setup on the page and I want to automatically make corresponding menu tab highlighted as well as corresponding content div show depending on # hash.

Example:

http://design.vitalbmx.com/user_menu/member_profile_so.html -- no hash, opens 1st tab

http://design.vitalbmx.com/user_menu/member_profile_so.html#setup -- #setup, should open "Setup" tab

As you can see it works for highlighting "Setup" tab. But content div does not change.

The script is below:

var tab_content_current = 1;
switch (window.location.hash) {
  case '#activity': tab_content_current = 1; break;
  case '#friends': tab_content_current = 2; break;
  case '#photos': tab_content_current = 3; break;
  case '#videos': tab_content_current = 4; break;
  case '#setup': tab_content_current = 5; break;
  case '#forum': tab_content_current = 6; break;
  case '#blog': tab_content_current = 7; break;
  case '#comments': tab_content_current = 8; break;
  case '#favorites': tab_content_current = 9; break;
  case '#profile-comments': tab_content_current = 10; break;
  default: tab_content_current = 1;
}
if (tab_content_current != 1) {
  change_active_tab (tab_content_current);
}
function tabs_toggle (id) {
  if (id != tab_content_current) {
    change_active_tab (id);
    tab_content_current = id;
  }
}
function change_active_tab (id) {
  $j('.profile_tabs li').removeClass('active');
  if (id < 8) $j('.profile_tab_'+id).addClass('active');
  $j('.profile_content').hide();
  $j('#profile_content_'+id).fadeIn();
}

Note that it works when you actually click menu tabs.

Any help to fix this problem would be greatly appreciated.

Answer 1

That part of the code is not inside a jQuery ready() call, so the DOM is not yet loaded when it runs.

EDIT: The reason the tabs work, is that the script appears to be in the middle of the HTML content. The tas come before the script, and the content comes after. So that tabs are loaded, and the content sections are not.

Do this:

$(document).ready(function() {

  var tab_content_current = 1;
  switch (window.location.hash) {
    case '#activity': tab_content_current = 1; break;
    case '#friends': tab_content_current = 2; break;
    case '#photos': tab_content_current = 3; break;
    case '#videos': tab_content_current = 4; break;
    case '#setup': tab_content_current = 5; break;
    case '#forum': tab_content_current = 6; break;
    case '#blog': tab_content_current = 7; break;
    case '#comments': tab_content_current = 8; break;
    case '#favorites': tab_content_current = 9; break;
    case '#profile-comments': tab_content_current = 10; break;
    default: tab_content_current = 1;
  }
  if (tab_content_current != 1) {
    change_active_tab (tab_content_current);
  }
  function tabs_toggle (id) {
    if (id != tab_content_current) {
      change_active_tab (id);
      tab_content_current = id;
    }
  }
  function change_active_tab (id) {
    $j('.profile_tabs li').removeClass('active');
    if (id < 8) $j('.profile_tab_'+id).addClass('active');
    $j('.profile_content').hide();
    $j('#profile_content_'+id).fadeIn();
  }

});

Or just place the script at the end of the page. Good idea to use ready() anyway, though.

Answer 2

Move the script to the very bottom of the page, after the profile_content divs. That way they will be in the DOM before the scripts run. It is also best to put scripts at the bottom of the page for speed reasons.

Answer 3

Try setting your <li> elements up like this:

<ul class="profile_tabs light"> 
    <li class="profile_tab_1 active"><a href="#activity">Activity</a></li> 

you can more easily write some jQuery to tab like so:

var tab_content_current = 1;
function GetIndex($obj) { return $(this).parent().children().index($obj); }

$j(function(){

    $j(".profile_tabs li").click(function(e){
        e.preventDefault();
        change_active_tab(GetIndex(this) + 1)
    });

    function change_active_tab (id) {
        tab_content_current = id;
        $j('.profile_tabs li').removeClass('active');
        if (id < 8) $j('.profile_tab_'+id).addClass('active');
        $j('.profile_content').hide();
        $j('#profile_content_'+id).fadeIn();
    }

    var hash = window.location.hash;
    if (hash != null && hash != "")
    {
        var $li = $(".profile_tabs li a[href=" + hash + "]");
        change_active_tab(GetIndex($li) + 1)
    }
});