.load a <div id='slider'> into empty div works fine, but creates a <div id='slider'> at bottom of the page, not sure why

Im using .load to load (when clicked) a nivo slider and a small bit of text into a empty div at the top of the page. It all works fine but when it loads it also loads an empty slider div bellow the footer, i could just hide this by making the giving the page a max-height but id like to get to find out what is causing this.

the page in question is new.pudle.co.uk if you click on one of the pink tiles it will open load the slider and at the same time put the empty div at the bottom.

The js im using is

google.setOnLoadCallback(function() {
$("#pegasus-tile, #o-w").click(function(){
    $("#proj-content").load("projects/pegasus.html", function(){

        $('<div id="slider" class="nivoSlider"></div>').appendTo($('body'));
        $('#slider').nivoSlider({effect: 'sliceUpDown'}),

        $("#close").click(function(){
        $("#proj-content").load("projects/blank.html"),


        $("#next-pegasus").click(function(){
        $("#proj-content").load("projects/bgapp.html");


            }); 
        });
    });
  });
});

Solution

I don't think you need the line

$('<div id="slider" class="nivoSlider"></div>').appendTo($('body'));

cos you have

<div id="slider" class="nivoSlider">
<img src="images/projects/pegasus property/1.png" width="490" height="400" />
<img src="images/projects/pegasus property/2.png" width="490" height="400" />
</div><!--slider close-->

in projects/pegasus.html, hence two sliders are appearing, and the one added by jquery is at the bottom.

Did you add this cos the nivoSlider didn't work without that or something?

Also I notice you have a google.setOnLoadCallback(function() { for every pink box... This may not turn out to be very maintainable (ok I assume you are just testing at the moment, but better to get it 'right' the first time. Maybe add a common class to each pink box, then use its id to work out what content to load.