title: jScrollpane with dynamically loaded content, not scrolling
body: <p>Alright, so I'm working on a website and currently I have a "shoutbox" at the index page however I'm loading the shouts from another .php file the problem is that the scrollbars shows up but I can't actually scroll, at the moment there are 6 shouts in the DB that are being loaded but I can only see 4 and I can't scroll down any more.</p>
  
  <p>If you want to check out the problem for yourself here is the link to the site (work in progress) <a href="http://ecazs.net/beerandguns/index.php" rel="nofollow">http://ecazs.net/beerandguns/index.php</a></p>
  
  <p>You are only able to see 4 but I can assure you there are 6!</p>
  
  <p>This is the code I use to load shouts.</p>
  
  <pre><code>$(document).ready(function(){
              $('.messages').fadeIn("slow").load('shoutbox/load.shouts.php');
              setInterval(function() {
                  $(".messages").load("shoutbox/load.shouts.php");
              }, 2000);
          });
  </code></pre>
  
  <p>And this is the "main" HTML of the shoutbox</p>
  
  <pre><code>&lt;div id="chat" class="jspScrollable"&gt;
  &lt;div class="jspContainer" style="width: 620px; height: 327px;"&gt;
      &lt;div class="jspPane" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 600px; top: 0px; "&gt;
          &lt;form action="" method="post" class="shout"&gt;
              &lt;p&gt;
                  &lt;label for="message" class="msglabel"&gt;Message:&lt;/label&gt;
              &lt;/p&gt;
              &lt;p&gt;
                  &lt;textarea name="message" id="message" class="msgfield" rows="2" cols="95"&gt;&lt;/textarea&gt;
              &lt;/p&gt;
              &lt;p&gt;
                  &lt;input type="image" name="submit" src="ext/images/submit_btn.png" value="" class="submit" onmouseover="this.src = 'ext/images/submit_btn_hover.png';" onmouseout="this.src = 'ext/images/submit_btn.png';"/&gt;
              &lt;/p&gt;
          &lt;/form&gt;
      &lt;div class="messages"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  I'm then using the jScrollpane function before body ENDS. So I'm first loading the content then the jScrollpane.</p>
  
  <pre><code>$(function(){
              $('#chat').jScrollPane();
          });
  </code></pre>
  
  <p>I really need help with this, if you have any ideas on how to solve this or improve it then please, please let me know.</p>