Full version: jsB@nk » Text » Writting » So-Ticker: OOP JavaScript Dynamic Ticker with Typing-Styled
URL: https://www.javascriptbank.com/so-ticker-oop-javascript-dynamic-ticker-typing-styled.html
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
Full version: jsB@nk » Text » Writting » So-Ticker: OOP JavaScript Dynamic Ticker with Typing-Styled
URL: https://www.javascriptbank.com/so-ticker-oop-javascript-dynamic-ticker-typing-styled.html
<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><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_tickerversion 1.0last revision: [email protected] implementation instructions, see:http://slayeroffice.com/code/so_ticker/Should you improve upon or modify thiscode, please let me know so that I can updatethe 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><!--/* 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>
/javascript/text/So_Ticker_OOP_JavaScript_Dynamic_Ticker_with_Typing_Styled/plus.png