jquery scrollable displays all items
<p>I am trying to create a basic list using jQuery scrollable, but I have a problem in that the entire list is being displayed - not a subset as supposedly defined by the 'size' parameter in scrollable().</p>

<p>I am testing in Chrome, and it does not detect any javascript errors. Futhermore, the list seems to be capturing the mousewheel when I hover over it, so something seems to be working.</p>

<p>I based this off this example <a href="http://flowplayer.org/tools/demos/scrollable/vertical.html" rel="nofollow">here</a>, and seeing as the example works in my browser, I must making some really damn obvious error. I am using the same css/js as was provided in the example.</p>

<p>Can anyone enlighten me?</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="css/scroll.css" type="text/css" media="print"&gt;
&lt;script src="js/jquery.js"&gt;&lt;/script&gt;
&lt;script&gt; 
// execute your scripts when DOM is ready. this is a good habit 
$(function() {         

    // initialize scrollable  
    $("div.scrollable").scrollable({ 
        vertical:true,  
        size:10,
        clickable:false

    // use mousewheel plugin 
    }).mousewheel();     

    // get handle to scrollable API 
    var api = $("div.scrollable").scrollable(); 

    // append new item using jQuery's append() method 
    for (i = 0 ; i &lt; 30 ; i++) {
        api.getItemWrap().append( 
        '&lt;p&gt;added'+i+'&lt;/p&gt;'
        );  
    }

    api.reload().end();      
}); 
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;


        &lt;div class="scrollable vertical"&gt;     

            &lt;!-- root element for the items --&gt; 
            &lt;div class="items"&gt; 

            &lt;/div&gt; 

        &lt;/div&gt; 


&lt;/body&gt;
&lt;/html&gt;
</code></pre>
