How to have two jquery functions for seperate divs? scrollable();

Question

I want to have two .scrollable() functions and have two instances of .navigator();

My page: (see scroll at the bottom) http://tinyurl.com/69r4bth

My JS

<script type="text/javascript">
$(function() {
    $(".scrollable").scrollable({
        circular: true,
        easing: 'easeInOutQuad',
        speed: 700
    }).autoscroll({
        autoplay: true,
        interval: 4000
    }).navigator();
    $(".scrollabler").scrollable({ //"scrollabler - note with the r at end
        circular: true,
        easing: 'easeInOutQuad',
        speed: 700
    }).autoscroll({
        autoplay: true,
        interval: 4000
    }).navigator();
});
</script>

Problem is the buttons and slider does not work for the 2nd scroller on the right. would appreciate a quick fix as deadline in 1 hour!

Answer 1

Maybe this would work:

<script type="text/javascript">
$(function() {
    //changed line
    $(".scrollable,.scrollabler").scrollable({
        circular: true,
        easing: 'easeInOutQuad',
        speed: 700
    }).autoscroll({
        autoplay: true,
        interval: 4000
    }).navigator();
});
</script>

edit : removed same class suggestion

Answer 2

For starters, you're getting a JavaScript error:

i.position() is null [Break On This Error] 0)return b;if(!c.circular&&a<0||a>b.ge...(b).bind(d,c[d]);b[d]=function(h){h&&

...which points to jquery.tools.min.js

Toward the bottom of your HTML, you have some JavaScript (to make both scrollable areas work, I presume), that ends with :

$(".scrollabler").scrollable({ circular: true }).navigator("#navix");

Not sure what you're trying to accomplish with that.

Looking at the documentation for scrollable, they use the same class for all scrollable elements on the same page. If you need to make distinctions between scrollabler and scrollable, just use different IDs and do "special stuff you need to do: separately.

Other than that, use the same class name for all scrollable items on the same page.

http://flowplayer.org/tools/demos/scrollable/multiple-scrollables.html

Answer 3

Do you have these elements at the same level in the DOM?

According to the documentation:

Now each of the scrollable uses the default selectors .next and .prev to look for the navigational elements causing multiple elements to be returned. How do we know which navigational element controls which scrollable? The problem can be solved by enclosing each scrollable and its navigational actions inside a mutual wrapper element.

http://www.jquerytools.org/documentation/scrollable/

I haven't tried it, but setting your elements up like this may work:

<div class='navi'>...navitems...</div>
<div class='scrollable'>
   <div class='pages'>
       ...scrollable items...
   </div>
</div>
<div class='wrapper'>
  <div class='navi'>...navitems...</div>
  <div class='scrollabler'>
     <div class='pages'>
       ...scrollable items...
     </div>
  </div>
</div>