This is how we roll

about 1 year ago - David Crean

var TickerManager = {
	ticker: null,
	elements: null,
	curElement: null,
	curElementIndex: 0,
	leftPosition: null,
	init: function() {
		this.ticker = $('ticker');
		this.elements = this.ticker.getElementsByTagName('li');
		this.leftPosition = YAHOO.util.Dom.getX(this.elements[this.curElementIndex]);
		this.addTriggers();
		this.animateTicker();
		setInterval('TickerManager.animateTicker()', 10000);
	},
	reorderElements: function(order) {
	
	},
	animateTicker: function() {
		if(this.curElement) {
			//move current element out of the way
			var scrollAnim = new YAHOO.util.Motion(this.curElement,{ points: { to: [this.leftPosition,250] } },1, YAHOO.util.Easing.easeOut);
			scrollAnim.animate();
			var opacityAnim = new YAHOO.util.Anim(this.curElement,{ opacity: { to: 0, from: 1 } },1, YAHOO.util.Easing.easeOut);
			opacityAnim.animate();
			this.curElementIndex = this.curElementIndex+1
		}
		this.curElement = this.elements[this.curElementIndex];
		this.curElement.style.top = '-40px';
		
		var scrollAnim = new YAHOO.util.Motion(this.curElement,{ points: { to: [this.leftPosition,200] } },1, YAHOO.util.Easing.easeOut);
		scrollAnim.animate();
		var opacityAnim = new YAHOO.util.Anim(this.curElement,{ opacity: { to: 1, from: 0 } },1, YAHOO.util.Easing.easeOut);
		opacityAnim.animate();
	},
	addTriggers: function() {
		var upArrow = $('ticker-up');
		var downArrow = $('ticker-down');
		
		YAHOO.util.Event.addListener(upArrow, 'click', TickerManager.reorderElements, 'up');
		YAHOO.util.Event.addListener(upArrow, 'click', TickerManager.reorderElements, 'down');
	}
}

These things just make sense to me sometimes.

Tags: javascript web design ticker UI