garethhall Posted August 27, 2010 Share Posted August 27, 2010 Hi I wonder if anyone can help me out. I am using the jquery tools plugins. I have posted this question on their forum to but no one has answered me yet. I need to run different scrollable objects concurrently. And it's not working for me. Actually if I change the class name away from scrollable it won't run at all. I have the scrollers set in a horizontal accordion. Here is my prototype page (it still just in the prototyping stage) http://www.communica.co.nz/concepts/prototyping/ As you can see the tab-horizontal accordion works. But only the "capacity scroller works"? Why does the others not work? and why am I forced to use a class of scrollable? Even if the is only one scroller I can not change the class. Thanks Gareth <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script> <!-- accordion styling --> <link rel="stylesheet" type="text/css" href="tabs-accordion-horizontal.css"/> <link rel="stylesheet" type="text/css" href="scrollable-horizontal.css" /> <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-buttons.css" /> </head> <body> <!-- accordion root --> <div id="accordion"> <!-- accordion header #1 --> <span class="accord_trigger">Interior</span> <div style="width:320px;" class="accord-content"> <a class="prev browse left"></a> <div class="interior"> <div class="items"> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_01.png" alt="feature_image_01" width="50" height="50" /> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_02.png" alt="feature_image_02" width="50" height="50" /> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_03.png" alt="feature_image_03" width="50" height="50" /> </div> </div> <a class="next browse right"></a> <script>$(".interior").scrollable();</script> </div> <span class="accord_trigger">Exterior</span> <div class="accord-content"> <a class="prev browse left"></a> <div class="exterior"> <div class="items"> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_01.png" alt="feature_image_01" width="50" height="50" /> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_02.png" alt="feature_image_02" width="50" height="50" /> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_03.png" alt="feature_image_03" width="50" height="50" /> </div> </div> <a class="next browse right"></a> <script>$(".exterior").scrollable();</script> </div> <span class="accord_trigger">Capacity</span> <div class="accord-content"> <a class="prev browse left"></a> <div class="scrollable"> <div class="items"> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_01.png" alt="feature_image_01" width="50" height="50" /> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_02.png" alt="feature_image_02" width="50" height="50" /> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_03.png" alt="feature_image_03" width="50" height="50" /> </div> </div> <a class="next browse right"></a> <script>$(".scrollable").scrollable();</script> </div> <span class="accord_trigger">Safety</span> <div class="accord-content"> <a class="prev browse left"></a> <div class="safety"> <div class="items"> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_01.png" alt="feature_image_01" width="50" height="50" /> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_02.png" alt="feature_image_02" width="50" height="50" /> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_03.png" alt="feature_image_03" width="50" height="50" /> </div> </div> <a class="next browse right"></a> <script>$(".safety").scrollable();</script> </div> <span class="accord_trigger">Awards</span> <div class="accord-content"> <a class="prev browse left"></a> <div class="awards"> <div class="items"> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_01.png" alt="feature_image_01" width="50" height="50" /> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_02.png" alt="feature_image_02" width="50" height="50" /> <img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_03.png" alt="feature_image_03" width="50" height="50" /> </div> </div> <a class="next browse right"></a> <script>$(".awards").scrollable();</script> </div> </div> <!-- activate tabs with JavaScript --> <script> $("#accordion").tabs("#accordion div.accord-content", { tabs: 'span.accord_trigger"', effect: 'horizontal' }); </script> </body> </html> Link to comment https://forums.phpfreaks.com/topic/211856-running-multiple-scrollable-concurrently-in-a-tab-jquery-tools/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.