title: jQuery: Div elements are not showing up
body: <p>I am adapting the <a href="http://paulbakaus.com/lab/js/coverflow/" rel="nofollow noreferrer">Coverflow technique</a> to work with a div. Following is the html:</p>
  
  <pre><code>    &lt;html&gt; 
   &lt;head&gt; 
    &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt; 
    &lt;style type="text/css" media="screen"&gt; 
     body,html {
      margin: 0;
      padding: 0;
      background: #000;
      height: 100%;
      color: #eee;
      font-family: Arial;
      font-size: 10px;
     }
     div.magnifyme {
      height: 80px;
      padding: 80px;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 2000px;
     }
     div.wrapper {
      margin: 0px;
      height: 470px;
      /*border: 2px solid #999;*/
      overflow: hidden;
      padding-left: 40px;
      right: 1px;
      width: 824px;
      position: relative;
     }
  
     div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;}
     div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; }
     div.magnifyme div {
      position: absolute;
      width: 300px;
      height: 280px;
      float: left;
      margin: 5px;
      position: relative;
      border: 2px solid #999;
      background: #500;
     }
    &lt;/style&gt; 
    &lt;script type="text/javascript" src="jquery-1.3.2.js"&gt;&lt;/script&gt; 
    &lt;script type="text/javascript" src="ui.coverflow.js"&gt;&lt;/script&gt; 
    &lt;script type="text/javascript" src="ui.core.js"&gt;&lt;/script&gt;  
    &lt;script type="text/javascript"&gt; 
     $(function() {
                $("div.magnifyme").coverflow();
      $("#add").click(function() {
       $(".magnifyme").append("&lt;div id=\"div5\"&gt;hello world&lt;/div&gt;");
       $("div.magnifyme").coverflow();
      });
  
     });
  
    &lt;/script&gt; 
   &lt;/head&gt; 
   &lt;body&gt; 
      &lt;div class="container"&gt;
      &lt;div class="wrapper"&gt; 
    &lt;div class="magnifyme"&gt; 
     &lt;div id="div0"&gt;This is div 0&lt;/div&gt;  
     &lt;div id="div1"&gt;This is div 1&lt;/div&gt;  
     &lt;div id="div2"&gt;This is div 2&lt;/div&gt;  
     &lt;div id="div3"&gt;This is div 3&lt;/div&gt;  
     &lt;div id="div4"&gt;This is div 4&lt;/div&gt;  
  
    &lt;/div&gt; 
      &lt;/div&gt;
      &lt;div class="nav"&gt;
    &lt;button type="button" id="add"&gt;Add to Deck&lt;/button&gt;
      &lt;/div&gt; 
     &lt;/div&gt;
  &lt;/body&gt; 
  &lt;/html&gt;  
  </code></pre>
  
  <p>The coverflow function (included as a js file in the head section) is <a href="http://paulbakaus.com/lab/js/coverflow/ui.coverflow.js" rel="nofollow noreferrer">here</a>. When I click the button, I was expecting it to add a DIV to the already present deck. For some reason, it doesn't show the newly added DIV. I tried calling the coverflow() function after I added the new element but that didn't work either. The modified coverflow function is given here:</p>
  
  <pre><code>;(function($){
  
      $.widget("ui.coverflow", {
          init: function() {
  
              var self = this;
  
              this.items = $(this.options.items, this.element).bind("click", function() {
                  self.moveTo(this);
                  //$("div.slider").slider("moveTo", self.current, null, true);
              });
              this.itemWidth = this.items.outerWidth(true);
  
              this.current = 0; //Start item
  
              this.refresh(1, 0, this.current);
              this.element.css("left",
                  (-this.current * this.itemWidth/2)
                  + (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
                  - (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
              );
  
          },
          moveTo: function(item) {
  
              this.previous = this.current;
              this.current = !isNaN(parseInt(item)) ? parseInt(item) : this.items.index(item);
              if(this.previous == this.current) return false; //Don't animate when clicking on the same item
  
              var self = this, to = Math.abs(self.previous-self.current) &lt;=1 ? self.previous : self.current+(self.previous &lt; self.current ? -1 : 1);
              $.fx.step.coverflow = function(fx) {
                  self.refresh(fx.now, to, self.current);
              };
  
              this.element.stop().animate({
                  coverflow: 1,
                  left: (
                      (-this.current * this.itemWidth/2)
                      + (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
                      - (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
                  )
              }, {
                  duration: 1000,
                  easing: "easeOutQuint"
              });
  
              /*current = this.current;
              $("[id^=div]").each(function() {
                  if(this.id != "div"+current) {
                      console.info(this.id + " Current: " + current);
                      $(this).fadeTo( 'slow', 0.1);
                  }
              });*/
  
          },
          refresh: function(state,from,to) {
  
              var self = this, offset = null;
  
              this.items.each(function(i) {
  
                  var side = (i == to &amp;&amp; from-to &lt; 0 ) ||  i-to &gt; 0 ? "left" : "right";
                  var mod = i == to ? (1-state) : ( i == from ? state : 1 );              
  
                  var before = (i &gt; from &amp;&amp; i != to);
  
                  $(this).css({
                      webkitTransform: "matrix(1,"+(mod * (side == "right" ? -0.5 : 0.5))+",0,1,0,0) scale("+(1+((1-mod)*0.5))+")",
                      left: (
                          (-i * (self.itemWidth/2))
                          + (side == "right"? -self.itemWidth/2 : self.itemWidth/2) * mod //For the space in the middle
                      ),
                      zIndex: self.items.length + (side == "left" ? to-i : i-to)
                  });
  
                  if(!$.browser.msie)
                      $(this).css("opacity", 1 - Math.abs((side == "left" ? to-i : i-to))/2);
              });
  
          }
      });
  
      $.extend($.ui.coverflow, {
          defaults: {
              items: "&gt; *"
          }
      });
  
  })(jQuery); 
  </code></pre>
  
  <p>One thing I did notice is that after clicking the button for about 5-10 times, the elements show up but not along with the already present divs but rather below them. I am guessing that this has something to do with the CSS of the magnifyme class (2000px), but I am not sure what it is. Is there any way I can make this work? </p>