Multiple scrollable objects in one page. Created Jun 4, 2009

yes it is. For example this page has two scrollables:

http://flowplayer.org/tools/demos/scrollable/

If you have followed the HTML structure on the minimal setup you can have as many instances as you want and they will all be activated with single $("div.scrollable").scrollable(); call.

Thanks for the reply...

the problem is that i followed the example with the example with navigational elements http://flowplayer.org/tools/demos/scrollable/navigation.html)

I need the left and right arrow to scroll the carrousel. The problem here is that when you click on the first one, automatically the second carrousel scrolls also.

Can the scrollable carrousels can independent from each other? and maybe have more than 2 per page???

Please check it here:http://flowplayer.org/tools/demos/scrollable/navigation.html

Click on the right arrow of the first example, and scroll down to the second carrousel, you'll see what i mean

I hope you can help me

Thanks

P.S Incredible Jquery tools you have here!

Yes, that´s true, i was watching it right now, when you use the navigation elements, they work for all scrollable item.

All you have to do is add <div> before each scroller and </div> after each scroller. Nothing else needs to be changed.

Example code:

<div> <!-- This div is only here to separate the different scrollers -->
<div class"navi"></div> <!-- Navigation bullets -->
<a class="prev"> <!-- Previous Link -->
<div class="scrollable"> <!-- Scrollable container -->
<div class="items"> <!-- Container actually being scrolled -->
<div class="single-item"> <!-- Individual item inside of the scroller -->
*Content for #1*
</div>
<div class="single-item"> <!-- Individual item inside of the scroller -->
*Content for #2*
</div>
<div class="single-item"> <!-- Individual item inside of the scroller -->
*Content for #3*
</div>
</div> <!-- /.items -->
</div> <!-- /.scrollable -->
</div> <!-- /Wrapping div -->

<!-- Without any changes to the javascript, here's another scroller that works completely independent from the other scroller(s) -->

<div> <!-- This div is only here to separate the different scrollers -->
<div class"navi"></div> <!-- Navigation bullets -->
<a class="prev"> <!-- Previous Link -->
<div class="scrollable"> <!-- Scrollable container -->
<div class="items"> <!-- Container actually being scrolled -->
<div class="single-item"> <!-- Individual item inside of the scroller -->
*Content for #1*
</div>
<div class="single-item"> <!-- Individual item inside of the scroller -->
*Content for #2*
</div>
<div class="single-item"> <!-- Individual item inside of the scroller -->
*Content for #3*
</div>
</div> <!-- /.items -->
</div> <!-- /.scrollable -->
</div> <!-- /Wrapping div -->

if only that were true. I'm having the same problem. Two scrollers on the page, and one of them has next/prev buttons. the next/prev link scrolls BOTH scrollers. I've done everything, added extra div;s, the whole thing.

i don't get it. it seems like these guys only managed to get it working on their demo pages. can't reproduce the same functionality in a real world situation.

Oh, awesome. turns out you MUST... MUST... put:

<span>Previous</span>
<span>Next</span>

for each scrollable section. if you have two scrollers, and one set of next/previous, then that will scroll ALL of them.

hey, might be a little helpful to let us know something like that. you know? maybe you could explain that? or, screw it, just let us bang our heads against the wall trying to debug every little requirement for this library as we go. jesus.

Hi there!

I am having the same issue and I can't seem to get the above suggested fixes to work. Here is my testing page.

http://www.premiumhomes.ca/new/index.php

I'm sure I'm just missing something small.

Please help! Much thanks.

Hi,

For each scrollable, you can specify the class associated with the desired navigation elements like this:

$(".scrollableOne").scrollable({ next: '.scrollableOneNext', prev: '.scrollableOnePrev' });
$(".scrollableTwo").scrollable({ next: '.scrollableTwoNext', prev: '.scrollableTwoPrev' });

Okay, so was able to get two identical scrollables to work independent on one page.http://premiumhomes.ca/new/index.php

<solid>However, my problem occurs when I try to implement two different "styles" of scrollable See page here:http://www.premiumhomes.ca/new/Copy-of-index.php

The first is identical to the home page of the JQuery Tools sitehttp://flowplayer.org/tools/demos/scrollable/home.html and the other scrollable is the minimal set-uphttp://flowplayer.org/tools/demos/scrollable/index.html</solid>

I'm implementing the code given in these examples and all is good except that the navigation seems to be linked and not independent.

I'm really new to jquery and I'm stumbling for hours over what is likely a simple fix. Here is the script I currently have implemented.

<!-- MAIN SCROLLABLE -->
<script>
// initialize scrollable and return the programming API
var api = $("#scroll").scrollable({
items: '#tools'

// use the navigator plugin
}).navigator().data("scrollable"); (Note: Could it be that both scripts are using "scrollable"?)

// this callback does the special handling of our "intro page"
api.onBeforeSeek(function(e, i) {

// when on the first item: hide the intro
if (i) {
$("#intro").fadeOut("slow");

// dirty hack for IE7-. cannot explain
if ($.browser.msie && $.browser.version < 8) {
$("#intro").hide();
}

// otherwise show the intro
} else {
$("#intro").fadeIn(1000);
}

// toggle activity for the intro thumbnail
$("#t0").toggleClass("active", i == 0);
});

// a dedicated click event for the intro thumbnail
$("#t0").click(function() {

// seek to the beginning (the hidden first item)
$("#scroll").scrollable().begin();

});

</script>

<!-- SECONDARY SCROLLABLE -->
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {

// initialize scrollable
$(".scrollable").scrollable();

});
</script>

Thank you for taking the time to help me.

Adam

fcatacutan: Thanks HEAPS for your post! I have two scrollables on the same page, and the Nav (prev & next) buttons for the first scrollable kept controlling both of them.

I just changed the prev & next class names and voila! Problem solved :)

There is a similar problem with the navi, or the little dots that change from frame to frame. The solution above works for the prev and next buttons, but there is no solution in the documentation regarding the navi.

This is a good post. This post give truly quality information.I?m definitely going to look into it.Really very useful tips are provided here.thank you so much.Keep up the good works.Houston Car Wreck Lawyer
Scrapbooking Supplies

I have gone through your post, very nicely written on selected topic and nice information you have shared in this post. I hope you will continue your same best in the future as well.Football Plays
Houston SEO

I am running into the same issue, I can get the scrollable to work with two on the same page, but I don't even want to use the previous and back buttons, all I want is the small Navi buttons on the page. I don't see a way to correct it, it looks like the navi class is built into the script.

Anybody?

wilsbadkarma,

Read the 'navigator' documentation, in the same way as the 'prev' and 'next' button classes can be assigned in the config. options for 'scrollable', the 'navi' class can be any class you specify for 'navigator'.

see my website http://www.okondowellbeing.com/ - this has multiple nested scrollables with unique navigator 'pips' and 'prev' 'next' buttons.