diff --git a/README.md b/README.md index 912efcc..3fc1d55 100644 --- a/README.md +++ b/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 -- zach@onemightyroar.com \ No newline at end of file +- zach@onemightyroar.com + +## 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 \ No newline at end of file diff --git a/css/style.css b/css/style.css index 66cfaf0..94ba084 100644 --- a/css/style.css +++ b/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; diff --git a/extern/jquery.mousewheel.js b/extern/jquery.mousewheel.js new file mode 100644 index 0000000..f1d5f72 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/js/jquery.totemticker.js b/js/jquery.totemticker.js index f4fa354..d7247d8 100644 --- a/js/jquery.totemticker.js +++ b/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,7 +114,7 @@ //Stop Button if (typeof(base.options.stop) != "undefined" && base.options.stop != null){ $(base.options.stop).click(function(){ - base.stop_interval(); + base.stop(); return false; }); } @@ -114,7 +122,7 @@ //Start Button if (typeof(base.options.start) != "undefined" && base.options.start != null){ $(base.options.start).click(function(){ - base.start_interval(); + base.start(); return false; }); } @@ -122,12 +130,7 @@ //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; }); } @@ -135,12 +138,7 @@ //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)); + } }); }; diff --git a/js/jquery.totemticker.min.js b/js/jquery.totemticker.min.js index 522eba2..fc9cecb 100644 --- a/js/jquery.totemticker.min.js +++ b/js/jquery.totemticker.min.js @@ -1 +1 @@ -(function(a){if(!a.omr){a.omr=new Object()}a.omr.totemticker=function(c,b){var d=this;d.el=c;d.$el=a(c);d.$el.data("omr.totemticker",d);d.init=function(){d.options=a.extend({},a.omr.totemticker.defaultOptions,b);d.ticker;d.format_ticker();d.setup_nav();d.start_interval()};d.start_interval=function(){clearInterval(d.ticker);if(d.options.direction=="up"){d.ticker=setInterval(function(){d.$el.find("li:last").detach().prependTo(d.$el).css("marginTop","-"+d.options.row_height);d.$el.find("li:first").animate({marginTop:"0px"},d.options.speed,function(){})},d.options.interval)}else{d.ticker=setInterval(function(){d.$el.find("li:first").animate({marginTop:"-"+d.options.row_height},d.options.speed,function(){a(this).detach().css("marginTop","0").appendTo(d.$el)})},d.options.interval)}};d.reset_interval=function(){clearInterval(d.ticker);d.start_interval()};d.stop_interval=function(){clearInterval(d.ticker)};d.format_ticker=function(){if(typeof(d.options.max_items)!="undefined"&&d.options.max_items!=null){var f=d.options.row_height.replace(/px/i,"");var e=f*d.options.max_items;d.$el.css({height:e+"px",overflow:"hidden"})}else{d.$el.css({overflow:"hidden"})}};d.setup_nav=function(){if(typeof(d.options.stop)!="undefined"&&d.options.stop!=null){a(d.options.stop).click(function(){d.stop_interval();return false})}if(typeof(d.options.start)!="undefined"&&d.options.start!=null){a(d.options.start).click(function(){d.start_interval();return false})}if(typeof(d.options.previous)!="undefined"&&d.options.previous!=null){a(d.options.previous).click(function(){d.$el.find("li:last").detach().prependTo(d.$el).css("marginTop","-"+d.options.row_height);d.$el.find("li:first").animate({marginTop:"0px"},d.options.speed,function(){d.reset_interval()});return false})}if(typeof(d.options.next)!="undefined"&&d.options.next!=null){a(d.options.next).click(function(){d.$el.find("li:first").animate({marginTop:"-"+d.options.row_height},d.options.speed,function(){a(this).detach().css("marginTop","0px").appendTo(d.$el);d.reset_interval()});return false})}if(typeof(d.options.mousestop)!="undefined"&&d.options.mousestop===true){d.$el.mouseenter(function(){d.stop_interval()}).mouseleave(function(){d.start_interval()})}};d.debug_info=function(){console.log(d.options)};d.init()};a.omr.totemticker.defaultOptions={message:"Ticker Loaded",next:null,previous:null,stop:null,start:null,row_height:"100px",speed:800,interval:4000,max_items:null,mousestop:false,direction:"down"};a.fn.totemticker=function(b){return this.each(function(){(new a.omr.totemticker(this,b))})}})(jQuery); \ No newline at end of file +(function(e){if(!e.omr){e.omr=new Object}e.omr.totemticker=function(t,n){var r=this;r.el=t;r.$el=e(t);r.$el.data("omr.totemticker",r);r.init=function(){r.options=e.extend({},e.omr.totemticker.defaultOptions,n);r.ticker;r.format_ticker();r.setup_nav();r.setup_scroll();r.start()};r.start_interval=function(){clearInterval(r.ticker);if(r.options.direction=="up"){r.ticker=setInterval(function(){r.$el.find("li:last").detach().prependTo(r.$el).css("marginTop","-"+r.options.row_height);r.$el.find("li:first").animate({marginTop:"0px"},r.options.speed,function(){r.$el.trigger("change")})},r.options.interval)}else{r.ticker=setInterval(function(){r.$el.find("li:first").animate({marginTop:"-"+r.options.row_height},r.options.speed,function(){e(this).detach().css("marginTop","0").appendTo(r.$el);r.$el.trigger("change")})},r.options.interval)}};r.reset_interval=function(){clearInterval(r.ticker);r.start_interval()};r.stop_interval=function(){clearInterval(r.ticker)};r.format_ticker=function(){r.$el.addClass("vTicker");if(typeof r.options.max_items!="undefined"&&r.options.max_items!=null){r.$el.find("li").outerHeight(r.options.row_height);var e=r.options.row_height.replace(/px/i,"");var t=e*r.options.max_items;r.$el.css({height:t+"px",overflow:"hidden"})}else{r.$el.css({overflow:"hidden"})}};r.setup_nav=function(){if(typeof r.options.stop!="undefined"&&r.options.stop!=null){e(r.options.stop).click(function(){r.stop();return false})}if(typeof r.options.start!="undefined"&&r.options.start!=null){e(r.options.start).click(function(){r.start();return false})}if(typeof r.options.previous!="undefined"&&r.options.previous!=null){e(r.options.previous).click(function(){r.previous();return false})}if(typeof r.options.next!="undefined"&&r.options.next!=null){e(r.options.next).click(function(){r.next();return false})}if(typeof r.options.mousestop!="undefined"&&r.options.mousestop===true){r.$el.mouseenter(function(){r.stop_interval()}).mouseleave(function(){if(r.options.isRunning){r.start_interval()}})}if(r.options.disableOnBlur){e(window).focus(function(){if(r.options.isRunning){r.start_interval()}});e(window).blur(function(){r.stop_interval()})}};r.setup_scroll=function(){if(typeof e.event.special.mousewheel!="undefined"){r.$el.mousewheel(function(){if(!r.options.scrolling&&r.options.mouse_scroll){r.options.scrolling=true;setTimeout(function(){r.options.scrolling=false},r.options.speed);if(event.wheelDeltaY>0||event.wheelDelta>0)r.previous();else r.next()}return false})}};r.debug_info=function(){console.log(r.options)};r.stop=function(){r.options.isRunning=false;r.stop_interval()};r.start=function(){r.options.isRunning=true;r.start_interval()};r.previous=function(){r.$el.find("li:last").detach().prependTo(r.$el).css("marginTop","-"+r.options.row_height);r.$el.find("li:first").animate({marginTop:"0px"},r.options.speed,function(){if(r.options.isRunning){r.reset_interval()}})};r.next=function(){r.$el.find("li:first").animate({marginTop:"-"+r.options.row_height},r.options.speed,function(){e(this).detach().css("marginTop","0px").appendTo(r.$el);if(r.options.isRunning){r.reset_interval()}})};r.init()};e.omr.totemticker.defaultOptions={message:"Ticker Loaded",next:null,previous:null,stop:null,start:null,row_height:"100px",speed:800,interval:4e3,max_items:null,mousestop:false,direction:"down",mouse_scroll:true,disableOnBlur:false};e.fn.totemticker=function(t,n){return this.each(function(){var r=e.data(this,"omr.totemticker");if(r){r[t].apply(r,n)}else{r=e.data(this,"omr.totemticker",new e.omr.totemticker(this,t))}})}})(jQuery) \ No newline at end of file