0

So I've been playing around with a JQuery plugin called Scrollable. I'm impressed with how easy it was to get up and going, but now I've run into a show stopper and hope you guys can help.

My scrollable div contains a bunch of icons that are "featured" in a certain category. If the category is changed, I use JQuery to clear out the "featured items" div, calculate the number of items, and fill it in as necessary. I clear everything out because in the case there is 0 I don't write anything to the div and the content on my page adjusts.

My problem has been that after one of these clear out the scrolling stops working. I've tried calling

$("#scroller").scrollable({
    circular: false
});

after every update but that doesn't seem to fix the issue. I'm familiar with other JQuery tools using a "refresh" type command that reloads the content. Is there something similar with this plugin? Any ideas on what I should be doing instead?

Thanks!

Staros
  • 3,232
  • 6
  • 30
  • 41
  • Did you try unbinding the scrollable object and re-binding after doing the DOM manipulation? – Incognito Mar 07 '11 at 21:31
  • I've tried doing a "$("#scroller").unbind('scroll'); " at the beginning of each DOM manipulation, then a "$("#scroller").scrollable..." at the end of each. Is that what you are referring to? – Staros Mar 07 '11 at 21:39

2 Answers2

0

There is a function on Scrollable, Scrollable.addItem which should allow you to dynamically add items.

idbentley
  • 4,188
  • 3
  • 34
  • 50
0

I ended up rewriting the page to never remove the scollable div from the DOM. With that, I ended up using this workflow...

Scroll to the first item. If the user was on page 5 and what they select only has 3 pages, the user is stranded on a blank page if you don't scroll back.
window.api.seekTo(0, 0);
Empty the "items" div.
$(".items").empty();
Use the "addItem" method to add my items back in.
window.api.addItem(htmlToAdd);

That seemed to work much better.

Staros
  • 3,232
  • 6
  • 30
  • 41