« »

This JavaScript code example makes your scrolling news tickers appear as being typed, but this is an improved JavaScript effect because it will not force users to wait for full displayed information; that's mean every time users move mouse over then I'll display all of title immediately.

Moreover, this JavaScript code example is also coded with JavaScript OOP and DOM skills, so it's a very helpful reference for JavaScript OOP beginners.

Try to enjoy more JavaScript typing text effects on jsB@nk:

- Simple JavaScript Typing Text onClick
- JavaScript Typing Text 2
- JavaScript Typing Scroller
- JavaScript Typing Text and Scroller

Label: JavaScript typing text, JavaScript typing test, type text JavaScript, news ticker JavaScript, JavaScript scrolling ticker, free JavaScript ticker, JavaScript text ticker, JavaScript horizontal ticker, scrolling news ticker, HTML dynamic text, So-Ticker, OOP and DOM, JavaScript OOP beginner

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
Files
CSS
JavaScript
HTML
Print

plus.png

Copy All x2

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
#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;
}

</style>

Copy All x2

<script type="text/javascript">
// Created by: Steve Chipman | http://slayeroffice.com/

/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/


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

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);
</script>

Copy All x2

<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->

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

		</ul>
	</div>

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

eChainBank.com ApexBTC.com choose.exchange YeuNu.com CTRCoin.com CreditCard.rip Card.rip this.bid ChainTutor.com war.money system.money pornID.net choose.works ZWVQ.com index.services CryptoKD.com ChatTotal.com CoinHolo.com ABP3.com XMQV.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

05/05/2011
Steve Chipman [more]
8,264
0
2
0
0.06 KBytes

So-Ticker: OOP JavaScript Dynamic Ticker with Typing-Styled

5/5 2 votes / 8,264 previews / 0 comment 05/05/2011 This JavaScript code example makes your ...So-Ticker: OOP JavaScript Dynamic Ticker with Typing-Styled - So-Ticker: OOP JavaScript Dynamic Ticker with Typing-Styled

SteveWalsh[2] admax[3]

Let's be first member to do this

admax

JavaScript by day

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web