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().
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.
I based this off this example here, 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.
Can anyone enlighten me?
<html>
<head>
<link rel="stylesheet" href="css/scroll.css" type="text/css" media="print">
<script src="js/jquery.js"></script>
<script>
// 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 < 30 ; i++) {
api.getItemWrap().append(
'<p>added'+i+'</p>'
);
}
api.reload().end();
});
</script>
</head>
<body>
<div class="scrollable vertical">
<!-- root element for the items -->
<div class="items">
</div>
</div>
</body>
</html>