Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

My 2 Cents So-ticker: oop javascript dynamic ticker with typing-styled

Discussion in 'Javascript and jQuery' started by JavaScriptBank, May 10, 2011.

Thread Status:
Not open for further replies.
  1. JavaScriptBank

    Yellow Belt

    Joined:
    Jul 11, 2009
    Messages:
    85
    Ratings:
    +0 / -0
    This JavaScript code example makes your detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Use CSS code below for styling the script
    CSS
    Code:
    Select All
    <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>
    Step 2: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code:
    Select All
    <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>
    Step 3: Place HTML below in your BODY section
    HTML
    Code:
    Select All
    <!-- /* 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>
    Step 4: must download files below
    Files
    plus.png






     
Thread Status:
Not open for further replies.

Share This Page