Compatible Browsers:
Example: View Code Demo
<html>
<head>
<title>Ticker Container Javascript Code Snippet</title>
<style>
BODY {font-family:verdana,arial,ms sans serif; font-size:90%;}
#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:0px; padding:0px;}
.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:#000000; font:bold 0.7em arial,verdana; border-right:1px solid #000000; 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:#000000; padding-right:2px;}
#so_tickerH1 a img {border-style:none;}
</style>
<script>
<!--
// Begin Ticker Container
// == This Script Free To Use Providing This Notice Remains ==
// == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library ==
// == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply ==
// == 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","images/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);
</script>
</head>
<body>
<div id="so_oTickerContainer">
<h1>Latest News:</h1>
<ul>
<!-- create as many LI's as you need -->
<li><a href="http://snapbuilder.com">Cat reported to have secured a fiddle.</a></li>
<li><a href="http://snapbuilder.com">Cows: Able to leap orbiting satellites?</a></li>
<li><a href="http://snapbuilder.com">People alarmed to hear small dog laughing.</a></li>
<li><a href="http://snapbuilder.com">Fork devastated as Spoon runs off with Dish.</a></li>
</ul>
</div>
<br /><br />
<p>Replace the 'plus.png' image with your own, or use this one ==>>>> <img src="images/plus.png" border="1"> (right click - save as)</p>
<p>Create as many <LI> slides as you need.</p>
<p>Adjust the STYLES to suit your needs.</p>
<p>You can transfer the 'javascript' code to an external file to minify your page size.</p>
</body>
</html>