jQuery Ticker Widget

by Mark

HTML

<div id="news-ticker">
    <div class="ticker-title">Breaking News: </div>
    <ul>
        <li data-href="http://www.thetimes.co.uk/tto/news/uk/crime/article3999682.ece" data-title="No 10 armed police arrested over hardcore pornography"></li>
        <li data-href="http://www.thetimes.co.uk/tto/environment/article3999530.ece" data-title="EDF extends life of UK nuclear plants"></li>
        <li data-href="http://www.thetimes.co.uk/tto/environment/article3999935.ece" data-title="PM rejected farmers’ flood cash plea six months ago"></li>
        <li data-href="http://www.thetimes.co.uk/tto/life/celebrity/article3995190.ece" data-title="From The IT Crowd to Los Angeles sex symbol"></li>
        <li data-href="http://www.thetimes.co.uk/tto/magazine/article3995148.ece" data-title="Superwoman Stephanie Flanders on how to do it all"></li>
        <li data-href="http://www.thetimes.co.uk/tto/sport/football/premierleague/article3999464.ece" data-title="Will Liverpool deliver for Suárez? Can Arsenal last?"></li>
    </ul>
    <a class="ticker-post"></a>
</div>

CSS

#news-ticker { font-weight: bold; }
#news-ticker .ticker-title {
    float: left;
    margin-right: 12px;
}
#news-ticker ul { display: none; }
#news-ticker .ticker-post {
    color: #0099CC;
    text-decoration: none;
}
#news-ticker .ticker-post:hover {
    text-decoration: underline;
    color: #0099CC;
}

JavaScript

$ = jQuery;
var newsTicker = function(ele){
	var eles = ele.find('ul li'),
		indexEle = 0,
		dataEle = ele.find('.ticker-post'),
		rotateChars = function(title){
			dataEle.text('');
			indexCut = 0;
			rotateCharsTimer = setInterval(function () {
				if(dataEle.text().length == title.length){
					clearInterval(rotateCharsTimer);
				}else if(dataEle.text().length < title.length){
					text = dataEle.text().concat(title.substr(indexCut,1));
					dataEle.text(text);
				};
				if(title.length-1 > indexCut) indexCut++; else indexCut=0;
			},90);
		},
		loopLs = function () {
			loopEle = eles.get(indexEle);
			eleHref  = $(loopEle).data('href');
			eleTitle = $(loopEle).data('title');
			dataEle.attr('href',eleHref);
			if(typeof rotateCharsTimer != 'undefined'){
				dataEle.fadeOut();
				clearInterval(rotateCharsTimer);
			}
			dataEle.fadeIn();
			rotateChars(eleTitle);
			if(eles.length-1 > indexEle) indexEle++; else indexEle=0;
		}
	loopLs();
	setInterval(function(){loopLs()},9400);
}
newsTicker($('#news-ticker'));