Question

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-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.

Answer 1

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());