JavaScript YUI newsticker

Posted 2021-05-20

HTML:
<div class="newsTicker">
 <ul>
  <li>
   <span>14-11-2008</span> <a href="#">Student Informatica wint eerste prijs waterschapsdebat</a>
  </li>

  <li>
   <span>14-11-2008</span> <a href="#">Basisschoolleerlingen bewust van respect</a>
  </li>

  <li>
   <span>14-11-2008</span> <a href="#">Tijdgebrek groot probleem voor studenten met functiebeperking</a>
  </li>

  <li>
   <span>14-11-2008</span> <a href="#">Regisseur Matanic wint Stenden Media Student Award</a>
  </li>

  <li>
   <span>14-11-2008</span> <a href="#">Stenden-studenten onderweg naar Dakar voor KiKa</a>
  </li>
 </ul>
</div>

CSS:
div.newsTicker {
 position: relative;
 width: 400px;
 overflow: hidden;
}
div.newsTicker ul li {
 white-space: nowrap;
 float: left;
 padding-right: 30px; /* don't change to margin = margin between news items */
}


JAVASCRIPT:
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;

YAHOO.namespace("snippet");
YAHOO.snippet.ticker = {
	init : function(className){
		this.speed = 150;
		// get all ticker element from a page
		this.tickerEl = Dom.getElementsByClassName(className);
		for(var i=0; i<this.tickerEl.length; i++) {
			this.buildTicker(this.tickerEl[i]);
		}
	},
	buildTicker : function(tickerEl) {
		// get all newsitems from a ticker element
		this.tickerItem = tickerEl.getElementsByTagName("li");
		this.tickerItemContainer = tickerEl.getElementsByTagName("ul");

		// get width of all list items and set the container to this width
		this.containerWidth = 0;
		for(var i=0; i<this.tickerItem.length; i++) {
			this.containerWidth += Dom.getRegion(this.tickerItem[i]).right - Dom.getRegion(this.tickerItem[i]).left;
		}
		Dom.setStyle(this.tickerItemContainer[0],"width",this.containerWidth + "px");

		// set position of container to the left of the containing box
		Dom.setStyle(this.tickerItemContainer[0],"left", (Dom.getRegion(tickerEl).right - Dom.getRegion(tickerEl).left) + "px");
		this.yPos = Dom.getRegion(this.tickerItemContainer[0]).top;

		// set listener for mouseover
		Event.addListener(this.tickerItemContainer[0],"mouseover",this.pauseAnim,this);

		// set listener for mouseout
		Event.addListener(this.tickerItemContainer[0],"mouseout",this.restartAnim,this);

		// start animation
		this.startAnim(tickerEl);
	},
	startAnim : function(tickerEl) {
		this.startPos = Dom.getStyle(this.tickerItemContainer[0],"left");
		this.startPos = this.startPos.split("px")[0];
		this.endPos = Dom.getRegion(tickerEl).left - this.containerWidth;

		this.attributes = {
			points: { to: [this.endPos,this.yPos] }
		};

		this.anim = new YAHOO.util.Motion(this.tickerItemContainer[0], this.attributes);
		this.currentWidth = this.containerWidth + parseFloat(this.startPos);
		this.anim.duration = this.currentWidth/this.speed;
		this.anim.useSeconds = true;
		this.anim.onComplete.subscribe(this.endAnim,this);
		this.anim.animate();
	},
	pauseAnim : function(e,obj) {
		obj.anim.stop();
	},
	restartAnim : function(e,obj) {
		obj.currentWidth = obj.containerWidth + Dom.getRegion(obj.tickerItemContainer[0]).left;
		obj.anim.duration = obj.currentWidth/obj.speed;
		obj.anim.animate();
	},
	endAnim : function(state,dur,obj) {
		if(Dom.getRegion(obj.tickerItemContainer[0]).left <= obj.endPos) {
			YAHOO.snippet.ticker.init("newsTicker");
		};
	}
}

initPage = function() {
	YAHOO.snippet.ticker.init("newsTicker");
}

Event.on(window,"load",initPage);