Vertical and Horizontal on same page. Created Mar 19, 2010

I am also trying to get both vertical and horzontal scrolls working on one page. I've tried renaming the div for one scroller to be different but it still does not work. I get both showing, but the external scroll controls for either one control both at the same time. The mousewheel works only on the vertical since it is only attached to that and the internal click on the edge image works correctly controling only the set that the image belongs to.

I am used the stand alone version of both combined onto one page with no other code on the page right now. So there is nothing else to interfere.

Further testing it appears that there can not be two horizontal scrolls on the same page either...

I've just two horizontals on the same page and they are working.

You have to encapsulate scrollable div's in different div's:

 

<div id="first">

<div class="scrollable">

...

</div>

</div>

<div id="second">

<div class="scrollable">

...

</div>

</div>

Then you can edit their CSS separatly and start them separatly:

$("#first").scrollable({"properties needed"});

$("#second").scrollable({"properties needed"});

Had to modify your code, it wouldn't work with the class and id on separate divs. However by combining them I got it working. Also I had to place the actions inside a div with the scrollable divs. So it wound up looking something like this.

<script>
$("#first")...
</script>

<div> <!-- just a container to include the actions -->
<div id="actions">
...
</div>
<div id="first" class="scrollable">
<div class="items">
...
</div>
</div>
</div> <!-- end container -->

<script>
$("#second")... <!-- here I have vertical:true, -->
</script>

<div> <!-- just a container to include the actions -->
<div id="actions">
...
</div>
<div id="second" class="scrollable">
<div class="items">
...
</div>
</div>
</div> <!-- end container -->

That's what's gotten it working for me.

Thanks again for you help!

the vertical scrollable scrolled horizontally until i added the horizontal and vertical:
$("#horizontal").scrollable();
$("#vertical").scrollable();
but now the vertical scrollable just budges slightly and doesn't actually scroll.

I'm guessing it has something to do with the scrollable automatically detecting which direction to scroll and since my vertical scrollable is short, that's why it was scrolling horizontally, but now it's not scrolling at all.

I'd really appreciate any assistance. I don't know if it helps, but here's what I'm working with.

<script>
$(function() {
$("#horizontal").scrollable();
});
</script> </div>

<div id="horizontal">  
            
<a class="prev browse left"></a>

<div class="scrollable">   
   
<div class="items">
       ........
</div>
</div>

<a class="next browse right"></a>
                    
<script>
$(function() {
$("#vertical").scrollable({vertical:true});
});
</script>
                    
<div id="vertical">
<div id="actions">
<a class="prev">« Back</a>
<a class="next">More »</a></div>

<div class="scrollable vertical">

<div class="items">
..............
</div>
</div>
</div>
</div>

UPDATE:
It needs to be
<div class="vertical">
not
<div class="scrollable vertical">
... just in case any other newbies like me have this problem.
Now it works. yay.