Issue 10 & 15. Long awaited fixes for autoscroll. More solid play/pause behaviour.

Author: tipiirai

src/scrollable/scrollable.autoscroll.js

@@ -37,10 +37,11 @@
 			if (api) { ret = api; }
 
 			// interval stuff
-			var timer, hoverTimer, stopped = true;
+			var timer, stopped = true;
 
 			api.play = function() {
 
+				
 				// do not start additional timer if already exists
 				if (timer) { return; }
 
@@ -51,11 +52,10 @@
 					api.next();				
 				}, opts.interval);
 
-				api.next();
 			};	
 
 			api.pause = function() {
-				timer = clearInterval(timer);	
+				timer = clearInterval(timer);
 			};
 
 			// when stopped - mouseover won't restart 
@@ -66,19 +66,11 @@
 
 			/* when mouse enters, autoscroll stops */
 			if (opts.autopause) {
-				api.getRoot().add(api.getNaviButtons()).hover(function() {			
-					api.pause();
-					clearInterval(hoverTimer);
-					
-				}, function() {
-					if (!stopped) {						
-						hoverTimer = setTimeout(api.play, opts.interval);						
-					}
-				});
-			}			
+				api.getRoot().add(api.getNaviButtons()).hover(api.pause, api.play);
+			}
 
 			if (opts.autoplay) {
-				setTimeout(api.play, opts.interval);				
+				api.play();				
 			}
 
 		});

test/scrollable/autoscroll.html

@@ -0,0 +1,52 @@
+
+<script src="../js/jquery-1.3.2.js"></script>
+<script src="../../src/scrollable/scrollable.js"></script>
+<script src="../../src/scrollable/scrollable.autoscroll.js"></script>
+
+<link rel="stylesheet" type="text/css" href="style.css"/>
+
+<script>
+$(function() {
+	$(".scrollable").scrollable({
+		circular: true,
+		
+		onSeek: function() {
+			// console.info(this.getIndex());
+		}
+		
+	}).autoscroll({autoplay: true, interval: 1000}); 	
+	
+	window.api = $(".scrollable").data("scrollable");
+});
+</script>
+
+
+<div>
+	
+	<a class="prev">prev</a>
+	
+	<div class="navi"></div>
+	
+	<div class="scrollable" style="width:130px">
+		
+		<div class="items">
+			<div>0</div>  
+			<div>1</div>  
+			<div>2</div>  
+			<div>3</div>  
+			<div>4</div>
+			<div>5</div>  
+			<div>6</div>  
+		</div>
+		
+	</div> 
+	
+	<a class="next">next</a>
+	
+</div>
+
+<p>
+	<button onclick='api.pause();'>pause</button>
+	<button onclick='api.play();'>play</button>
+</p>
+