Running Multiple Scrollable Concurrently in a Tab (jquery Tools)

garethhall · 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>

Sign In

Running Multiple Scrollable Concurrently in a Tab (jquery Tools)

Recommended Posts

garethhall

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information