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 >> Multi Color LED Marquee

Code Snippet </> Info

Snippet Name: Multi Color LED Marquee

Description: Create a Multi-color LED Marquee ticker for your page.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo


Author: Curt Turner

Last Modified: 2015-08-26 23:40:08

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
Copied To Clipboard!

<html> <head> <title>Multi Color LED Marquee Javascript Code Snippet</title> <style> BODY {font-family:verdana,arial,ms sans serif; font-size:90%;} .digit {float:left; width:14px; height:26px; margin-right:2px; background:#000 url(images/ledmarquee.gif) 0px 0px;} #ledmarquee {height:26px; visibility:hidden; background-color:#000000;} </style> <script> /* // Begin Multi Color LED Marquee // == This Script Free To Use Providing This Notice Remains == // == This Script Has Been Found In The Free Public Codes Library == // == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == // == Created by: Curt Turner | : Creative Commons License == */ mwidth=20; // the number of characters in the display mdelay=200; // delay in milliseconds between character shifts dumpExtraSpaces=false; // set to true if you want to reduce multiple spaces to a single space mpos=0; chars=" 0123456789abcdefghijklmnopqrstuvwxyz+-*/=?^&().,'!~$"; content=new Array(); color=new Array(); colors=new Array(); colors['green']=0; colors['yellow']=-27; colors['red']=-54; colors['blue']=-81; colorind=new Array(); colorind[0]='green'; var mtxt; function marqueeInit(){ mtxt=document.getElementById("ledmarquee").innerHTML.toLowerCase(); mtxt=mtxt.replace(/\.\.\./g,'~'); mtxt=mtxt.replace(/&/g,'&'); mtxt=mtxt.replace(/"/g,"'"); mtxt=mtxt.replace(/\[/g,'('); mtxt=mtxt.replace(/\]/g,')'); mtxt=mtxt.replace(/\{/g,'('); mtxt=mtxt.replace(/\}/g,')'); mtxt=mtxt.replace(/[\n\r]/g,' '); if(dumpExtraSpaces) mtxt=mtxt.replace(/\s{2,}/g,' '); bpos=mtxt.indexOf('<'); attempt=0; while(bpos>=0){<([^>]*)>/); ctmp=RegExp.$1; colorind[bpos]=ctmp; mtxt=mtxt.replace(/<[^>]*>/,''); bpos=mtxt.indexOf('<'); attempt++; if(attempt>500){ alert('parse failure'); // prevent browser lockups if something goes fishy (open <) return false; } } mcont="<div style='display:none'>"+mtxt+"<p></p></div>"; for(i=0;i<mwidth;i++){ mcont+="<div class='digit' id='js_dig"+i+"'></div>\n"; mtxt=' '+mtxt+' '; } curcolor=0; for(i=0;i<mtxt.length;i++){ if(colorind[i-mwidth]!=null){ curcolor=colors[colorind[i-mwidth]]||0; } color[i]=curcolor; content[i]=-16*chars.indexOf(mtxt.substr(i,1)); } document.getElementById("ledmarquee").style.width=(mwidth*16)+'px'; document.getElementById("ledmarquee").innerHTML=mcont; document.getElementById("ledmarquee").style.visibility='visible'; mtimer=setInterval('marqueeScroll()',mdelay); } function marqueeScroll(){ for(i=0;i<mwidth;i++){ document.getElementById('js_dig'+i).style.backgroundPosition=content[i+mpos]+'px '+color[i+mpos]+'px'; } mpos++; if(mpos==mtxt.length-mwidth) mpos=0; } function onloadAppend(func){ var oldonload=window.onload; if(typeof window.onload!='function'){ window.onload=func; } else { window.onload=function(){ if(oldonload) { oldonload(); } func(); } } } onloadAppend(marqueeInit); </script> </head> <body> <div id="ledmarquee">Multi-<red>C<blue>o<yellow>l<green>o<red>r<green> JavaScript LED marquee - IE - FF - Chrome - Safari - Opera compatible - <yellow>no fonts required <green>- one image (36k) - user defined speed and width - 012...789 +-*/=?^&().,'!$...</div> <p>Replace the 'ledmarquee.gif' image with your own, or use this one below:<br /> <img src="images/ledmarquee.gif" border="1"> (right click - save as)</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> <br /><br /> <div id="snippet"> [ This code example from <a href="">Multi Color LED Marquee</a> page. ] </div> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library