/** * 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('
' + $marquee.html() + '
').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)); // jQuery.fn.opacity && animated color in jQuery.fx (function(jQuery){jQuery.fn.opacity=function(v){if(!jQuery.browser.msie){return this.css({opacity:v})}var v=v*100;return this.css({'-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity='+v+')','filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity='+v+')'})};jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(fx.state==0){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end)}fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")"}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];return colors[jQuery.trim(color).toLowerCase()]}function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))break;attr="backgroundColor"}while(elem=elem.parentNode);return getRGB(color)};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(jQuery);