Updates with mouse wheel scrolling and $().totemticker() functions.

README.md

@@ -1,4 +1,4 @@
-# Totem Ticker jQuery Plugin
+# Totem Ticker jQuery Plugin - v2.1
 
 Totem is a jQuery plugin that turns lists into animated vertical tickers. It supports navigation and basic animation control.
 
@@ -26,9 +26,44 @@ The following options are available via the plugin array. Defaults are listed be
     speed		:	800,		/* Speed of transition animation in milliseconds */
     interval	:	4000,		/* Time between change in milliseconds */
     max_items	: 	null, 		/* Integer for how many items to display at once. Resizes height accordingly (OPTIONAL) */
-    stopmouse	:	false,		/* If set to true, the ticker will stop while mouse is hovered over it */
+    mousestop	:	false,		/* If set to true, the ticker will stop while mouse is hovered over it */
+    direction	:	'down'		/* Direction that list will scroll */
+    mouse_scroll:       true            /* Scroll the ticker with the mosue wheel if the jquery.mousewheel plugin is loaded. (http://brandonaaron.net/code/mousewheel/docs) */
+    disableOnBlur: 	false		/* Start and stop the ticker automaticaly when the window loses focus. */
+
+
+The following functions are also supported.
+
+    $(selector).totemticker("start");
+    $(selector).totemticker("stop");
+    $(selector).totemticker("previous");
+    $(selector).totemticker("next");
 
 ## Contact
 
 - http://twitter.com/zachdunn
-- [email protected]
+- [email protected]
+
+## Version 2 Changes
+
+- Added support for mouse whee scrolling.
+- Tickers now all get the vTicker class for css markup.
+- If a row height is specified that the items are now actually restricted to that height.  Add the following css to make longer items scroll properly.
+        .vTicker li { overflow: hidden; }
+- Added helper methods for easy scripting of the ticker.
+        $(selector).totemticker("start");
+        $(selector).totemticker("stop");
+        $(selector).totemticker("previous");
+        $(selector).totemticker("next");
+
+ - Jeremy Pyne
+ - http://pynej.blogspot.com
+
+## Version 2.1 Changes
+
+- Now triggers a change event on element rotations.  You can now do this:
+        $(selector).totemticker().change(function() {console.log("I was rotated.");})
+- Added disableOnBlur option to pause the ticker when the browser window loses focus.
+
+- Jeremy Pyne
+- http://pynej.blogspot.com

css/style.css

@@ -65,6 +65,7 @@ h1.logo{
 		display:block;
 		background:#efefef;
 		color:#333;
+		overflow:hidden;
 		border-bottom:1px solid #ddd;
 		text-align:center;
 		font-size:25px;

extern/jquery.mousewheel.js

@@ -0,0 +1,84 @@
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);

js/jquery.totemticker.js

@@ -1,9 +1,11 @@
 /*
-	Totem Ticker Plugin
+	Totem Ticker Plugin v2.1
 	Copyright (c) 2011 Zach Dunn / www.buildinternet.com
 	Released under MIT License
 	--------------------------
 	Structure based on Doug Neiner's jQuery plugin blueprint: http://starter.pixelgraphics.us/
+
+	Updates By: Jeremy Pyne http://pynej.blogspot.com
 */
 (function( $ ){
 
@@ -34,8 +36,11 @@
 			//Setup navigation links (if specified)
 			base.setup_nav();
 
+			//Setup mouse wheel scrolling.
+			base.setup_scroll();
+
 			//Start the ticker
-			base.start_interval();
+			base.start();
 
 			//Debugging info in console
 			//base.debug_info();
@@ -54,6 +59,7 @@
 				        marginTop: '0px'
 				    }, base.options.speed, function () {
 				        //Callback functions go here
+						base.$el.trigger("change");
 				    });
 				}, base.options.interval);
 			}else{
@@ -64,6 +70,7 @@
 		            	marginTop: '-' + base.options.row_height
 		            }, base.options.speed, function() {
 		                $(this).detach().css('marginTop', '0').appendTo(base.$el);
+						base.$el.trigger("change");
 		            });
 
 		    	}, base.options.interval);
@@ -80,8 +87,9 @@
 	    }
 
 		base.format_ticker = function(){
-
+			base.$el.addClass("vTicker");
 			if(typeof(base.options.max_items) != "undefined" && base.options.max_items != null) {
+				base.$el.find('li').outerHeight(base.options.row_height);
 
 				//Remove units of measurement (Should expand to cover EM and % later)
 				var stripped_height = base.options.row_height.replace(/px/i, '');
@@ -106,41 +114,31 @@
 			//Stop Button
 			if (typeof(base.options.stop) != "undefined"  && base.options.stop != null){
 				$(base.options.stop).click(function(){
-					base.stop_interval();
+					base.stop();
 					return false;
 				});
 			}
 
 			//Start Button
 			if (typeof(base.options.start) != "undefined"  && base.options.start != null){
 				$(base.options.start).click(function(){
-					base.start_interval();
+					base.start();
 					return false;
 				});
 			}
 
 			//Previous Button
 			if (typeof(base.options.previous) != "undefined"  && base.options.previous != null){
 				$(base.options.previous).click(function(){
-					base.$el.find('li:last').detach().prependTo(base.$el).css('marginTop', '-' + base.options.row_height);
-					base.$el.find('li:first').animate({
-				        marginTop: '0px'
-				    }, base.options.speed, function () {
-				        base.reset_interval();
-				    });
+					base.previous();
 				    return false;
 				});
 			}
 
 			//Next Button
 			if (typeof(base.options.next) != "undefined" && base.options.next != null){
 				$(base.options.next).click(function(){
-					base.$el.find('li:first').animate({
-						marginTop: '-' + base.options.row_height
-			        }, base.options.speed, function() {
-			            $(this).detach().css('marginTop', '0px').appendTo(base.$el);
-			            base.reset_interval();
-			        });
+					base.next();
 			        return false;
 				});
 			}
@@ -150,16 +148,51 @@
 				base.$el.mouseenter(function(){
 					base.stop_interval();
 				}).mouseleave(function(){
-					base.start_interval();
+					if(base.options.isRunning) {
+						base.start_interval();
+					}
+				});
+			}
+
+			// Stop on window blur
+			if(base.options.disableOnBlur) {
+				$(window).focus(function() {
+					if(base.options.isRunning) {
+						base.start_interval();
+					}
+				});
+
+				$(window).blur(function() {
+					base.stop_interval();
 				});
 			}
+
 
 			/*
 				TO DO List
 				----------------
 				Add a continuous scrolling mode
 			*/
+		}
 
+		base.setup_scroll = function(){
+			if(typeof $.event.special.mousewheel != "undefined") {
+			base.$el.mousewheel(function() {
+				if(!base.options.scrolling && base.options.mouse_scroll) {
+
+					base.options.scrolling = true;
+					setTimeout(function() {
+						base.options.scrolling = false;
+					}, base.options.speed);
+
+					if(event.wheelDeltaY > 0 || event.wheelDelta > 0)
+						base.previous();
+					else
+						base.next();
+				}
+				return false;
+			});
+			}
 		}
 
 		base.debug_info = function()
@@ -168,6 +201,38 @@
 			console.log(base.options);
 		}
 
+		base.stop = function() {
+			base.options.isRunning = false;
+			base.stop_interval();
+		}
+
+		base.start = function() {
+			base.options.isRunning = true;
+			base.start_interval();
+		}
+
+		base.previous = function() {
+			base.$el.find('li:last').detach().prependTo(base.$el).css('marginTop', '-' + base.options.row_height);
+			base.$el.find('li:first').animate({
+				marginTop: '0px'
+			}, base.options.speed, function () {
+				if(base.options.isRunning) {
+					base.reset_interval();
+				}
+			});
+		}
+
+		base.next = function() {
+			base.$el.find('li:first').animate({
+				marginTop: '-' + base.options.row_height
+			}, base.options.speed, function() {
+				$(this).detach().css('marginTop', '0px').appendTo(base.$el);
+				if(base.options.isRunning) {
+					base.reset_interval();
+				}
+			});
+		}
+
 		//Make it go!
 		base.init();
   };
@@ -182,13 +247,20 @@
   		speed		:	800,		/* Speed of transition animation in milliseconds */
   		interval	:	4000,		/* Time between change in milliseconds */
 		max_items	: 	null, 		/* Integer for how many items to display at once. Resizes height accordingly (OPTIONAL) */
-		mousestop	:	false,		/* If set to true, the ticker will stop on mouseover */
-		direction	:	'down'		/* Direction that list will scroll */		
+	  	mousestop	:	false,		/* If set to true, the ticker will stop on mouseover */
+		direction	:	'down',		/* Direction that list will scroll */
+	  	mouse_scroll: 	true,		/* Scroll the ticker with the mosue wheel if the jquery.mousewheel plugin is loaded. */
+	  	disableOnBlur: 	false		/* Start and stop the ticker automaticaly when the window loses focus. */
   };
 
-  $.fn.totemticker = function( options ){
+  $.fn.totemticker = function( options , args ){
     return this.each(function(){
-    	(new $.omr.totemticker(this, options));
+			var instance = $.data(this, "omr.totemticker");
+			if (instance) {
+				instance[options].apply(instance, args);
+			} else {
+				instance = $.data(this, "omr.totemticker", new $.omr.totemticker(this, options));
+			}
   	});
   };