BBC Style News Ticker with Prototype or Mootools

We needed to create a BBC style news ticker for a client recently and couldn't find a decent one anywhere, so we decided to create our own:

Usage

Place the following code in the HEAD of your document:

<head>
  <script type="text/javascript" src="path_to/ticker.js"></script>
</head>

You will need to use one of the ticker.js listing below, plus download either prototype.js or mootools.js

Place the news articles you want to use some within the body of the document, we have used a definition list (<dl>, <dt> & <dd>) but you could use almost any tag you want:

<dl id="news">
	<dt><strong>LATEST NEWS</strong></dt>
	<dd><a href="#">This is the first news item...</a></dd>
	<dd><a href="#">This is the second news item...</a></dd>
	<dd><a href="#">This is the third news item...</a></dd>
	<dd><a href="#">This is the fourth news item...</a></dd>
</dl>

Finally add the JavaScript call to start the ticker

				// Call ticker from within document.observe handler for Prototype
				document.observe("dom:loaded", function() {
				   new ticker($$("#news dd"));
				});

				// Call ticker from within window.addEvent handler for Mootols
				window.addEvent('domready', function() {
				   new ticker($$("#news dd"));
				});

Prototype ticker.js Code

				var ticker = Class.create({
					initialize: function(container, options) {
						this.container = container;
						this.options = Object.extend(options || {},{
							frequency: 500,
							item_frequency: 1000,
							char_frequency: 50,
							endBits: ['_','-']
						});
						this.current = 0;
						this.currentChar = 0;
						this.startTick();
					},
					startTick: function() {
						this.container.each(function(item) {
							item.hide();
						});
						setTimeout(this.onTick.bind(this), this.options.frequency);
					},
					onTick: function() {
						if(this.currentChar==0) {
							if (this.current_item) {
								this.current_item.hide();
							}
							this.current_item = this.container[this.current%this.container.length];
							this.current_item.show();
							this.current_element = this.current_item.firstDescendant()
							this.current_title = this.current_element.innerHTML;
							this.current++;
						}
				
						this.current_element.innerHTML = this.current_title.substring(0,this.currentChar) + this.options.endBits[this.currentChar&this.options.endBits.length-1];
						if(this.currentChar==this.current_title.length) {
							this.current_element.innerHTML = this.current_title.substring(0,this.current_title.length);
							this.currentChar=0;
							var t = this.options.item_frequency || 1000;
						} else {
							this.currentChar++;
							var t = this.options.char_frequency || 50;
						}
						setTimeout(this.onTick.bind(this),t);
					}
				});

Mootools ticker.js Code

var ticker = new Class({
	initialize: function(container, options) {
		this.container = container;
		this.options = Object.extend(options || {},{
			frequency: 500,
			item_frequency: 2500,
			char_frequency: 80,
			endBits: ['_','-']
		});
		this.current = 0;
		this.currentChar = 0;
		this.startTick();
	},
	startTick: function() {
		this.container.each(function(item) {
			item.setStyles('display: none;');
		});
		setTimeout(this.onTick.bind(this), this.options.frequency);
	},
	onTick: function() {
		if(this.currentChar==0) {
			if (this.current_item) {
				this.current_item.setStyles('display: none;');
			}
			this.current_item = this.container[this.current%this.container.length];
			this.current_item.setStyles('display: inline;');
			this.current_title = this.current_item.getFirst("a").innerHTML;
			this.current++;
		}
		
		this.current_item.getFirst("a").innerHTML = this.current_title.substring(0,this.currentChar) + this.options.endBits[this.currentChar&this.options.endBits.length-1];
		if(this.currentChar==this.current_title.length) {
			this.current_item.getFirst("a").innerHTML = this.current_title.substring(0,this.current_title.length);
			this.currentChar=0;
			var t = this.options.item_frequency || 1000;
		} else {
			this.currentChar++;
			var t = this.options.char_frequency || 50;
		}
		setTimeout(this.onTick.bind(this),t);
	}
});

Bookmark/Search this post with:

Post tags: