When I click on the .backward anchor being on the first tab, it shows the last one. Even if rotate is set to false.
$(document).ready(function(){
$('.agenda-tabs').tabs(".agenda-terms", {
effect: 'fade',
rotate: false
}).slideshow({
clickable: false
});
});
How can I stop it from "rotating" from the first to the last tab?
The HTML code is:
<div class="wrapper">
<div class="agenda-navigation">
<select class="agenda-track-select">
<option value="track-1">Track 1</option>
<option value="track-2">Track 2</option>
<option value="track-3">Track 3</option>
<option value="track-4">Track 4</option>
<option value="track-5">Track 5</option>
<option value="track-6">Track 6</option>
<option value="track-7">Track 7</option>
<option value="track-8">Track 8</option>
</select>
<div class="buttons">
<button class="backward">« Previous</button>
<button class="forward">Next »</button>
</div>
</div>
<div class="agenda">
<div class="agenda-term-list">
<div class="agenda-term-time">11:00 - 12:00</div>
<div class="agenda-term-time">12:00 - 13:00</div>
<div class="agenda-term-time">11:00 - 12:00</div>
<div class="agenda-term-time">12:00 - 13:00</div>
</div>
<div class="items">
<div class="agenda-terms">
<div class="agenda-term-row">
<div class="agenda-term-point tracks-all">
Lorem ipsum register now!
</div>
</div>
<div class="agenda-term-row">
<div class="agenda-term-point track-1 current">
Lorem ipsum t1
</div>
<div class="agenda-term-point track-2">
Lorem ipsum dolor sit amet... t2
</div>
<div class="agenda-term-point track-3">
Lorem ipsum t3
</div>
<div class="agenda-term-point track-4">
Lorem ipsum dolor sit amet... t4
</div>
</div>
<div class="agenda-term-row">
<div class="agenda-term-point tracks-all">
Lorem ipsum register now!
</div>
</div>
<div class="agenda-term-row">
<div class="agenda-term-point track-1 current">
Lorem ipsum t1
</div>
<div class="agenda-term-point track-2">
Lorem ipsum dolor sit amet... t2
</div>
<div class="agenda-term-point track-3">
Lorem ipsum t3
</div>
<div class="agenda-term-point track-4">
Lorem ipsum dolor sit amet... t4
</div>
</div>
</div>
<div class="agenda-terms">
<div class="agenda-term-row">
<div class="agenda-term-point tracks-all">
Lorem ipsum register now!
</div>
</div>
<div class="agenda-term-row">
<div class="agenda-term-point track-5 current">
Lorem ipsum t5
</div>
<div class="agenda-term-point track-6">
Lorem ipsum dolor sit amet... t6
</div>
<div class="agenda-term-point track-7">
Lorem ipsum t7
</div>
<div class="agenda-term-point track-8">
Lorem ipsum dolor sit amet... t8
</div>
</div>
<div class="agenda-term-row">
<div class="agenda-term-point tracks-all">
Lorem ipsum register now!
</div>
</div>
<div class="agenda-term-row">
<div class="agenda-term-point track-5 current">
Lorem ipsum t5
</div>
<div class="agenda-term-point track-6">
Lorem ipsum dolor sit amet... t6
</div>
<div class="agenda-term-point track-7">
Lorem ipsum t7
</div>
<div class="agenda-term-point track-8">
Lorem ipsum dolor sit amet... t8
</div>
</div>
</div>
</div>
</div>
</div>
<div class="agenda-tabs">
<a href="#"></a>
<a href="#"></a>
</div>
I found this to be a bug in jquery-tools. Please use this version i changed myself while they don't fix it in their source.
I changed this:
if (b.rotate) {
var k = g.length - 1;
if (0 > a) return e.click(k, h);
if (a > k) return e.click(0, h)
}
To this:
var k = g.length - 1;
if (0 > a) if (b.rotate) return e.click(k, h); else a = 0;
if (a > k) if (b.rotate) return e.click(0, h); else a = k;
Also made a fiddle with your code to show it working: http://jsfiddle.net/bortao/k2f57/
Had to remove one <a> since you had two tabs, and not three.