if(window.location.hash) event only executing partially

Question

I'm trying to use hashtags to show divs that are also shown by clicking the in the navbar. (i'm using jquery instead of links for pages and i want them directly linkable.)

For some reason it's only causing parts of the .click functions to happen! ???

here's my script (i'm new, i'm sure this is horribly inelegant but it's getting the job done)

//Close
$('#close').click(function() {
    $('#bio, #books, #extras, #news, #contact').fadeOut('slow');
    $('.bio, .books, .extras, .news, .contact').removeClass('nav-selected');
    $('#background').fadeTo('slow',1);
    $('#close').fadeTo('slow',0);
    window.location.hash = '';
});

//Title
$('#titlelink').click(function() {
    $('#bio, #books, #extras, #news, #contact').fadeOut('slow');
    $('.bio, .books, .extras, .news, .contact').removeClass('nav-selected');
    $('#background').fadeTo('slow',1);
    window.location.hash = '';
});

//Bio
$('.bio').click(function() {
    $('#bio').fadeIn('slow');
    $('.bio').addClass('nav-selected');
    $('#books, #extras, #news, #contact').fadeOut('slow');
    $('.books, .extras, .news, .contact').removeClass('nav-selected');
    $('#background').fadeTo('slow', 1);
    $('#title').fadeIn('slow');
    $('#close').fadeTo('slow',0.8);
    window.location.hash = 'bio';
});

//Books
$('.books').click(function() {
    $('#bookswrap, #books').fadeIn('slow');
    $('.books').addClass('nav-selected');
    $('#bio, #extraswrap, #newswrap, #contact').fadeOut('slow');
    $('.bio, .extras, .news, .contact').removeClass('nav-selected');
    $('#background').fadeTo('slow', 0.2);
    $('#close').fadeTo('slow',0.8);
    window.location.hash = 'books';
});

//Extras
$('.extras').click(function() {
    $('#extraswrap, #extras').fadeIn('slow');
    $('.extras').addClass('nav-selected');
    $('#bio, #bookswrap, #newswrap, #contact').fadeOut('slow');
    $('.bio, .books, .news, .contact').removeClass('nav-selected');
    $('#background').fadeTo('slow', 0.2);
    $('#title').fadeIn('slow');
    $('#close').fadeTo('slow',0.8);
    window.location.hash = 'extras';
});

//News
$('.news').click(function() {
    $('#newswrap, #news').fadeIn('slow');
    $('.news').addClass('nav-selected');
    $('#bio, #bookswrap, #extraswrap, #contact').fadeOut('slow');
    $('.bio, .books, .extras, .contact').removeClass('nav-selected');
    $('#background').fadeTo('slow', 0.2);
    $('#title').fadeIn('slow');
    $('#close').fadeTo('slow',0.8);
    window.location.hash = 'news';
});

//Magnus
$('.magnus').click(function() {
    window.open('http://magnusflyte.com/');
});

//Contact
$('.contact').click(function() {
    $('#contact').fadeIn('slow');
    $('.contact').addClass('nav-selected');
    $('#bio, #books, #extras, #news').fadeOut('slow');
    $('.bio, .books, .extras, .news').removeClass('nav-selected');
    $('#background').fadeTo('slow', 1);
    $('#title').fadeIn('slow');
    $('#close').fadeTo('slow',0.8);
    window.location.hash = 'contact';
});

if(window.location.hash) {
    $('.' + window.location.hash.substr(1)).click();
}   

So when i reload the hash pages the background fades properly and the classes are switched correctly but the divs (for example, #bookswrap, #books) don't fade in.

Any ideas? I imagine it's something dumb cause I'm new to all this.

Answer 1

Is this at the top of the page or the bottom? My guess is that the first few lines are not running because the page isn't fully loaded yet, a race condition, but the lower lines are running because jQuery puts this on its internal event queue so they actually run some milliseconds later. If thats the case, just wrap this whole thing in something like this:

$(function() {
    //all your code in here
});

Which tells jQuery to only run this code after the whole file has loaded.