General

This script creates a ticker by parsing existing semantic markup. Easy to set-up.

Latest News:

Notes

Created by: Steve Chipman
Web Site: http://slayeroffice.com/
Posted: June 25, 2008

The JavaScript is namespaced and written as an Object Literal. It initializes from the so_ticker.init method which should be called from your onload event handler.

If the user mouses over the ticker or sets focus to it (i.e., tabs to it), the complete text for the item will expand and the ticker will pause until the user mouses out or the ticker loses focus to another element. The title attribute of the ticker is set to the text content.

Clicking on (or otherwise activating) the plus sign will expose all of the content at once, stop the ticker and set focus to the first anchor element.

If JavaScript isn't available, the user is given a regular list of items below a heading.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: soTicker.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Steve Chipman | http://slayeroffice.com/Licensed under: Creative Commons License
 */

/****************************

so_ticker
version 1.0
last revision: 03.30.2006
steve@slayeroffice.com

For implementation instructions, see:
http://slayeroffice.com/code/so_ticker/

Should you improve upon or modify this
code, please let me know so that I can update
the version hosted at slayeroffice.

Please leave this notice intact.


****************************/

so_ticker = new Object();
so_ticker = {
	current:0,			
	currentLetter:0,	
	zInterval:null,	
	tObj: null,			
	op:0.95,			
	pause: false,		
	tickerContent: [],	
	LETTER_TICK:100, 
	FADE: 10, 
	NEXT_ITEM_TICK: 3000, 
	init:function() {
		var d=document;	
		var mObj = d.getElementById("so_oTickerContainer");	
		so_ticker.tObj = d.createElement("div");		
		so_ticker.tObj.setAttribute("id","so_tickerDiv"); 
		var h = d.createElement("h1");	
		h.appendChild(d.createTextNode(so_ticker.getTextNodeValues(mObj.getElementsByTagName("h1")[0])));	
		h.setAttribute("id","so_tickerH1");	
		var ea = d.createElement("a");
		ea.setAttribute("href","javascript:so_ticker.showContent();");
		pImg = ea.appendChild(document.createElement("img"));
		pImg.setAttribute("src","plus.png");
		pImg.setAttribute("alt","Click to View all News Items.");
		ea.setAttribute("title","Click to View all News Items.");
		h.insertBefore(ea,h.firstChild);
		anchors = mObj.getElementsByTagName("a");		
		var nObj = mObj.cloneNode(false);		
		mObj.parentNode.insertBefore(nObj,mObj); 
		mObj.style.display = "none";	
		nObj.className = "so_tickerContainer"; 	
		nObj.setAttribute("id","so_nTickerContainer");
		nObj.appendChild(h); 	
		nObj.appendChild(so_ticker.tObj);	
		so_ticker.getTickerContent();	
		so_ticker.zInterval = setInterval(so_ticker.tick,so_ticker.LETTER_TICK);	 
	},
	showContent:function() {
			var d = document;
			d.getElementById("so_oTickerContainer").style.display = "block"; 
			d.getElementById("so_nTickerContainer").style.display = "none";
			d.getElementById("so_oTickerContainer").getElementsByTagName("a")[0].focus();
			clearInterval(so_ticker.zInterval);
	},
	getTickerContent:function() {
		for(var i=0;i<anchors.length;i++) so_ticker.tickerContent[i] = so_ticker.getTextNodeValues(anchors[i]);
	}, 
	getTextNodeValues:function(obj) {
		if(obj.textContent) return obj.textContent;
		if (obj.nodeType == 3) return obj.data;
		var txt = [], i=0;
		while(obj.childNodes[i]) {
			txt[txt.length] = so_ticker.getTextNodeValues(obj.childNodes[i]);
			i++;
		}
    	return txt.join("");
    },
    tick: function() {
    	var d = document;
    	if(so_ticker.pause) {
    		try {
    			so_ticker.clearContents(d.getElementById("so_tickerAnchor"));
    			d.getElementById("so_tickerAnchor").appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current]));
    			so_ticker.currentLetter = so_ticker.tickerContent[so_ticker.current].length;
    		} catch(err) { }
    		return;
    	}
    	if(!d.getElementById("so_tickerAnchor")) {
    		var aObj = so_ticker.tObj.appendChild(d.createElement("a"));
    		aObj.setAttribute("id","so_tickerAnchor");
    		aObj.setAttribute("href",anchors[so_ticker.current].getAttribute("href"));
    		aObj.onmouseover = function() { so_ticker.pause = true; }
    		aObj.onmouseout = function() { so_ticker.pause = false; }
    		aObj.onfocus = aObj.onmouseover;
			aObj.onblur = aObj.onmouseout;
			aObj.setAttribute("title",so_ticker.tickerContent[so_ticker.current]);
    	}
		d.getElementById("so_tickerAnchor").appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current].charAt(so_ticker.currentLetter)));
    	so_ticker.currentLetter++;
    	if(so_ticker.currentLetter > so_ticker.tickerContent[so_ticker.current].length) {
    		clearInterval(so_ticker.zInterval);
    		setTimeout(so_ticker.initNext,so_ticker.NEXT_ITEM_TICK);
    	}
    },
    fadeOut: function() {
    	if(so_ticker.paused) return;
    	so_ticker.setOpacity(so_ticker.op,so_ticker.tObj);
    	so_ticker.op-=.10;
    	if(so_ticker.op<0) {
    		clearInterval(so_ticker.zInterval);
    		so_ticker.clearContents(so_ticker.tObj);
    		so_ticker.setOpacity(.95,so_ticker.tObj);
    		so_ticker.op = .95;
    		so_ticker.zInterval = setInterval(so_ticker.tick,so_ticker.LETTER_TICK);
    	}
    },
    initNext:function() {
    		so_ticker.currentLetter = 0, d = document;
    		so_ticker.current = so_ticker.tickerContent[so_ticker.current + 1]?so_ticker.current+1:0;
    		d.getElementById("so_tickerAnchor").setAttribute("href",anchors[so_ticker.current].getAttribute("href"));
    		d.getElementById("so_tickerAnchor").setAttribute("title",so_ticker.tickerContent[so_ticker.current]);
    		so_ticker.zInterval = setInterval(so_ticker.fadeOut,so_ticker.FADE);
    },
    setOpacity:function(opValue,obj) {
    	obj.style.opacity = opValue;
    	obj.style.MozOpacity = opValue;
    	obj.style.filter = "alpha(opacity=" + (opValue*100) + ")";
    },
    clearContents:function(obj) {
    	try {
    		while(obj.firstChild) obj.removeChild(obj.firstChild);
    	} catch(err) { }
    }
}


function page_init(){
	so_ticker.init();
}
window.addEventListener?window.addEventListener("load",page_init,false):window.attachEvent("onload",page_init);

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#so_oTickerContainer {
	width:700px;
	margin:auto;
	font:1.0em verdana,arial;
	background-color:lightyellow;
	border-top:1px solid yellow;
	border-bottom:1px solid yellow;
}

#so_oTickerContainer h1 {
	font:bold 0.9em verdana,arial;
	margin:0;
	padding:0;
}
	
.so_tickerContainer {
	position:relative;
	margin:auto;
	width:700px;
	background-color:lightyellow;
	border-top:1px solid yellow;
	border-bottom:1px solid yellow;
}

#so_tickerAnchor, #so_oTickerContainer a {
	text-decoration:none;
	color:black;
	font:bold 0.7em arial,verdana;
	border-right:1px solid #000;
	padding-right:2px;
}

#so_oTickerContainer a {
	border-style:none;
}

#so_oTickerContainer ul {
	margin-top:5px;
}

#so_tickerDiv {
	display:inline;
	margin-left:5px;
}

#so_tickerH1 {
	font:bold 1.0em arial,verdana;
	display:inline;
}

#so_tickerH1 a {
	text-decoration:none;
	color:#000;
	padding-right:2px;
}

#so_tickerH1 a img {
	border-style:none;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="soTicker.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="so_oTickerContainer">
	<h1>Latest News:</h1>
	<ul>
		<li><a href="http://slayeroffice.com">Cat reported to have secured a fiddle.</a></li>
		<li><a href="http://centricle.com">Cows: Able to leap orbiting satellites?</a></li>
		<li><a href="http://adactio.com">People alarmed to hear small dog laughing.</a></li>
		<li><a href="http://steve.ganz.name/blog/">Fork devastated as Spoon runs off with Dish.</a></li>
	</ul>
</div>

Other

Download the images using the URL below:

Download the images here

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Latest News:

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

1. From: Norbert
good work
10/09/2008 06:52:36

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Latest News:

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

1. From: Norbertgood work10/09/2008 06:52:36

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

1. From: Norbert
good work
10/09/2008 06:52:36