JQuery: Using the load() command

The website to see the error (click the home, models, etc links) : http://bit.ly/9AE2RI

I am trying to get the #content-container of other pages to load into the current pages #content-container. I can do this but what the .load in JQuery seems to do is make it like so:

<div id=content-container style="display:block">
   <div id=content-container>
      OTHER PAGE CONTENT HERE
   </div>
</div>

Therefore when I am using transparent backgrounds like I am on #content-container, then it creates 2 backgrounds, thus messing up the transparency. It also seems to inherit the padding or margin of the #content-container giving it an offset.

Is there not a way to take just the inside of #content-container and load it into the current #content-container; Such as:

<div id=content-container>
      OTHER PAGE CONTENT HERE
</div>

JQUERY code here: (taken from example at http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content开发者_JAVA百科-with-jquery/)

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#sub-navigation li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content-container';
            $('#content-container').load(toLoad)
        }                                           
    });

    $('#sub-navigation li a').click(function(){

        var toLoad = $(this).attr('href')+' #content-container';
        $('#content-container').hide('fast',loadContent);


        //$('#load').remove();
        //$('#wrapper').append('<span id="load">LOADING...</span>');
        //$('#load').fadeIn('normal');
        //window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content-container').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content-container').show('normal',hideLoader());
        }
        function hideLoader() {
            //$('#load').fadeOut('normal');
        }
        return false;

    });

});

Please note the comments are going to be features to come.

When you set your toLoad variable, add the all children selector so that you don't get the parent element.

e.g. -

var toLoad = $(this).attr('href')+' #content-container > *';

This way, the toLoad var will only have the children of #content-container

Or if that doesn't work for you, you can call load on an element not added to the dom yet like this:

var $div = $("<div/>");
$div.load(toLoad);
$("#content-container").html($div.contents());

Load your content into a variable/object

Like so:

var contentContainerContent = $.load(toLoad,'','')

and add it to content container like so

$("#content-container").html(contentContainerContent);