/** * author Remy Sharp * url http://remysharp.com/tag/marquee */ (function ($) { $.fn.marquee = function (klass) { var newMarquee = [], last = this.length; // works out the left or right hand reset position, based on scroll // behavior, current direction and new direction function getReset(newDir, marqueeRedux, marqueeState) { var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir; var r = 0; if (behavior == 'alternate') { r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : width; } else if (behavior == 'slide') { if (newDir == -1) { r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width; } else { r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : 0; } } else { r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0; } return r; } // single "thread" animation function animateMarquee() { var i = newMarquee.length, marqueeRedux = null, $marqueeRedux = null, marqueeState = {}, newMarqueeList = [], hitedge = false; while (i--) { marqueeRedux = newMarquee[i]; $marqueeRedux = $(marqueeRedux); marqueeState = $marqueeRedux.data('marqueeState'); if ($marqueeRedux.data('paused') !== true) { // TODO read scrollamount, dir, behavior, loops and last from data marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir); // only true if it's hit the end hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState); if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) { if (marqueeState.behavior == 'alternate') { marqueeState.dir *= -1; // flip } marqueeState.last = -1; $marqueeRedux.trigger('stop'); marqueeState.loops--; if (marqueeState.loops === 0) { if (marqueeState.behavior != 'slide') { marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState); } else { // corrects the position marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState); } $marqueeRedux.trigger('end'); } else { // keep this marquee going newMarqueeList.push(marqueeRedux); $marqueeRedux.trigger('start'); marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState); } } else { newMarqueeList.push(marqueeRedux); } marqueeState.last = marqueeRedux[marqueeState.axis]; // store updated state only if we ran an animation $marqueeRedux.data('marqueeState', marqueeState); } else { // even though it's paused, keep it in the list newMarqueeList.push(marqueeRedux); } } newMarquee = newMarqueeList; if (newMarquee.length) { setTimeout(animateMarquee, 25); } } // TODO consider whether using .html() in the wrapping process could lead to loosing predefined events... this.each(function (i) { var $marquee = $(this), width = $marquee.attr('width') || $marquee.width(), height = $marquee.attr('height') || $marquee.height(), $marqueeRedux = $marquee.after('<div ' + (klass ? 'class="' + klass + '" ' : '') + 'style="display: block-inline; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').next(), marqueeRedux = $marqueeRedux.get(0), hitedge = 0, direction = ($marquee.attr('direction') || 'left').toLowerCase(), marqueeState = { dir : /down|right/.test(direction) ? -1 : 1, axis : /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop', widthAxis : /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight', last : -1, loops : $marquee.attr('loop') || -1, scrollamount : $marquee.attr('scrollamount') || this.scrollAmount || 2, behavior : ($marquee.attr('behavior') || 'scroll').toLowerCase(), width : /left|right/.test(direction) ? width : height }; // corrects a bug in Firefox - the default loops for slide is -1 if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') { marqueeState.loops = 1; } $marquee.remove(); // add padding if (/left|right/.test(direction)) { $marqueeRedux.find('> div').css('padding', '0 ' + width + 'px'); } else { $marqueeRedux.find('> div').css('padding', height + 'px 0'); } // events $marqueeRedux.bind('stop', function () { $marqueeRedux.data('paused', true); }).bind('pause', function () { $marqueeRedux.data('paused', true); }).bind('start', function () { $marqueeRedux.data('paused', false); }).bind('unpause', function () { $marqueeRedux.data('paused', false); }).data('marqueeState', marqueeState); // finally: store the state // todo - rerender event allowing us to do an ajax hit and redraw the marquee newMarquee.push(marqueeRedux); marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState); $marqueeRedux.trigger('start'); // on the very last marquee, trigger the animation if (i+1 == last) { animateMarquee(); } }); return $(newMarquee); }; }(jQuery));