title: jQuery SlidesJS plugin does not display when called in a div
body: <p>I am using the SlideJS plugin from <a href="http://slidesjs.com" rel="nofollow">http://slidesjs.com</a>.</p>
  
  <p>It works perfectly fine when the <code>slideshow.htm</code> page is opened in a browser.</p>
  
  <p>However, the problem arises when I try to load this page into a <code>div#main</code> on my homepage. Only the outer frame of the slideshow along with the left and right scroll buttons are displayed. The actual slides from the slideshow are not displayed at all. </p>
  
  <p>However, if I try to display any other webpage in this <code>div#main</code>, it displays fine.</p>
  
  <p>Here is the code of <code>slideshow.htm</code>:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="slidecss/global.css"&gt;
  
  &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;
  &lt;script src="js/slides.min.jquery.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(function(){
          $('#slides').slides({
              preload: true,
              preloadImage: 'img/loading.gif',
              play: 5000,
              pause: 2500,
              hoverPause: true
          });
      }); 
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt; 
  &lt;div id="example"&gt; 
  &lt;div id="slides"&gt; 
    &lt;div class="slides_container"&gt; &lt;img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"&gt; 
      &lt;img src="img/slide-2.jpg" width="570" height="270" alt="Slide 2"&gt; &lt;img src="img/slide-3.jpg" width="570" height="270" alt="Slide 3"&gt; 
      &lt;img src="img/slide-4.jpg" width="570" height="270" alt="Slide 4"&gt; &lt;img src="img/slide-5.jpg" width="570" height="270" alt="Slide 5"&gt; 
      &lt;img src="img/slide-6.jpg" width="570" height="270" alt="Slide 6"&gt; &lt;img src="img/slide-7.jpg" width="570" height="270" alt="Slide 7"&gt; 
    &lt;/div&gt;
    &lt;!--slides_container --&gt;
    &lt;a href="#" class="prev"&gt;&lt;img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"&gt;&lt;/a&gt; 
    &lt;a href="#" class="next"&gt;&lt;img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"&gt;&lt;/a&gt; 
  &lt;/div&gt;
  &lt;!--slides--&gt;
  &lt;img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"&gt; 
  &lt;/div&gt;
  &lt;!--example --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS code used by <code>slideshow.htm</code>:</p>
  
  <pre><code>#container {
  width:580px;
  padding:10px;
  margin:0 auto;
  position:relative;
  z-index:0;
  }
  
  #example {
  width:600px;
  height:350px;
  position:relative;
  }
  
  
  #frame {
  position:absolute;
  z-index:0;
  width:739px;
  height:341px;
  top:-3px;
  left:-80px;
  }
  
  /*
  Slideshow
  */
  
  #slides {
  position:absolute;
  top:15px;
  left:4px;
  z-index:100;
  }
  
  /*
  Slides container
  Important:
  Set the width of your slides container
  Set to display none, prevents content flash
  */
  
  .slides_container {
  width:570px;
  overflow:hidden;
  position:relative;
  display:none;
  
  }
  
  /*
  Each slide
  Important:
  Set the width of your slides
  If height not specified height will be set by the slide content
  Set to display block
  */
  
  .slides_container a {
  width:570px;
  height:270px;
  display:block;
  }
  
  
  .slides_container a img {
  display:block;
  }
  
  
  
  #slides .next,#slides .prev {
  position:absolute;
  top:107px;
  left:-39px;
  width:24px;
  height:43px;
  display:block;
  z-index:101;
  }
  
  #slides .next {
  left:585px;
  }
  </code></pre>
  
  <p>Here I call <code>loadHome()</code> which loads the <code>slideshow.htm</code> page into <code>div#main</code>:</p>
  
  <pre><code>&lt;li class=""&gt;&lt;a href="" id="home" onclick="return loadHome()"&gt;Home&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Here's the <code>loadHome()</code> code getting <code>slideshow.htm</code>:</p>
  
  <pre><code>function loadHome() {
      var xmlhttp = createobject();
      xmlhttp.open("GET","slideshow.htm",true);
      xmlhttp.send();
      xmlhttp.onreadystatechange=function() {
          if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) {
              document.getElementById("main").innerHTML=xmlhttp.responseText;
          }
      }
      return false;
  }
  </code></pre>
  
  <p>Here's the CSS of <code>div#main</code>:</p>
  
  <pre><code>#main{
  margin: auto;
  padding: 20px;
      min-height: 500px;
      width: 900px;
      background-color: #95a5bf;
  }
  </code></pre>