Question

EDIT:

Alright, to help resolve this, I’ve put up the example online:
http://lodge323.com/test/index.html

The example works as intended, but it doesn’t have the content that I want on it. Note that this apparently only happens on FF13 and not IE9.

Steps to recreate the problem:
-Ctrl+F5 to reload the page (overriding cache).
-Using Firebug (addon for FF), change 1.jpg to head.gif
-Click on the Inventory menu tab on the right

Notice how there’s a gap between the menu and the bottom which doesn’t happen if 1.jpg is used. So question is, how can I get that gif image to work properly with the page?

Answer 1

jQuery’s load is asynchronous.

Instead of calling loadSidebar after loadContent, pass it as a callback to load:

$(document).ready(function() {
    $(".tabs a").click(function() {
        loadContent('#ContentDiv', this, '.tabs a', 'id', loadSidebar);
    });
});

function loadContent(divTarget, elm, selector, attr, callback) {
    $(divTarget).load($(elm).attr(attr) + ' #ContentLoad', callback);
}

This will call loadSidebar, when the content has finished loading, instead of immediately after it starts loading.

Check out Understanding Callback Functions in Javascript. It might help you understand why the callback is needed.

Edit

As Eric pointed out it the comments you are also storing a url in an id. You should instead store it in the href attribute of the anchor. Then you can just return false from your click handler to avoid the entire page being loaded:

$(document).ready(function() {
    $(".tabs a").click(function() {
        loadContent('#ContentDiv', this, '.tabs a', 'href', loadSidebar);
        return false;
    });
});