Snap Builder HTML5 CSS3 Free Public Codes Library


<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 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: Curt Turner | http://www.turner3d.net/ : 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){
                mtxt.search(/<([^>]*)>/);
                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 abc...xyz +-*/=?^&().,'!$...</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="http://snapbuilder.com/code_snippets/copy_code_snippet_33.html">Multi Color LED Marquee</a> page. ]
</div>
</body>
</html>