Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Javascript Codes Library >> News Ticker & Marquees >> Ticker Container


Code Snippet </> Info


Snippet Name: Ticker Container

Description: Create an awesome news ticker for your page.


Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser


Example: View Code Demo

Note: You can save the + 'plus.png' image used for the ticker container from the demo page.

Author: Steve Chipman

Last Modified: 2015-12-13 07:01:28

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<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 http://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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library