Hi All,

I definitely need someone to come to my rescue !
My problem is this: I'm coding a web site which needs some effects.

I dynamically append a div to another with the following function below. and the next load some external content , again with jQuery's load() function unto it. All works fine and all's displayed correctly when the page's displayed.

I use an onclick event on a link to fire these functions and it does so as required. But I realized after a keen analysis of my page with firebug that "the div shrinks (width and height reducing at random intervals)" out and also the text within it when I fire multiple clicks without stop. So at one point, the whole div dissappears and so its contents leaving a blank page infront of me.
I'm confused. I cannot track from where the fault is! Is it jQuery bugging or is there anything I've not done and that must be done ?

What do I need to do to avoid this occuring. Please, help !!

Thanks


 function appendContentDiv(){
$(function(){
  var container = $("#content");
  var div = document.getElementById('content_right');
  if(div == null){
 container
    .css('position', 'relative')
    // create and append foreground div
    // (initially visible, obscuring parent's background)
    .append( $("<div></div>")
      .attr('id', 'content_right')
      .css({
        position: 'absolute',
        top:0,
        left:0,
       // zIndex:-1, //have been put in the css
        //width:590,
        //height:483
      })
    );
    }
  else {/*do nothing*/}
});
}