Marquee
Sitepoint Help
http://www.sitepoint.com/forums/showthread.php?852856-Jquery-Marquee-Slider-Help
HTML
<h1>This runs differently than the ticker for some reason. It's highly annoying in my personal opinion.</h1>
<div id="ticker">
<div class="event">test1</div>
<div class="event">Herp Derp Derp</div>
<div class="event">test3</div>
<div class="event">This is test number 4</div>
</div>
CSS
.event{float: left;}
/* Add width and it will run, sorta fine
.event{width:100px;}
*/
JavaScript
(function($) {
$.fn.textWidth = function(){
return $(this).width();
};
$.fn.textWidthTrue = function(){
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
$.fn.marquee = function(args) {
var that = $(this);
var $textWidth = that.textWidth(),
offset = that.width(),
width = offset,
css = {
'text-indent' : that.css('text-indent'),
'overflow' : that.css('overflow'),
'white-space' : that.css('white-space')
},
marqueeCss = {
'text-indent' : width,
'overflow' : 'hidden',
'white-space' : 'nowrap'
},
args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
i = 0,
stop = $textWidth*-1,
dfd = $.Deferred();
function go() {
if (that.data('isStopped') != 1)
{
if(!that.length) return dfd.reject();
if(width == stop) {
i++;
if(i == args.count) {
that.css(css);
return dfd.resolve();
}
if(args.leftToRight) {
width = $textWidth*-1;
} else {
width = offset;
}
}
that.css('text-indent', width + 'px');
if(args.leftToRight) {
width++;
} else {
width--;
}
}
setTimeout(go, 10);
};
...