« »

A variable width/speed marquee HTML, marquee text with realistic multi-color LED digits. No fonts required, and it uses only a single 36Kb image.

See also: LED Display Panel

Label: LED Panel, marquee, LED, speed, image, marquee HTML, marquee text

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

ledmarquee.gif

Copy All x2

<style type="text/css">
<!--
.digit {
  float: left;
  width: 14px;
  height: 26px;
  margin-right: 2px;
  background: #000 url(ledmarquee.gif) 0px 0px;
}

#ledmarquee {
  height: 26px;
  visibility: hidden;
  background-color: #000;
}

#ledContainer {
  background-color: #000;
  padding: 5px;
}
-->
</style>

Copy All x2

<script type="text/javascript">
<!--
// Created by: Curt Turner :: http://www.turner3d.net/

// the number of characters in the display
mwidth=20;

// delay in milliseconds between character shifts
mdelay=200;

// set to true if you want to reduce multiple spaces to a single space
dumpExtraSpaces=false;

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(/[nr]/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){
  			// prevent browser lockups if something goes fishy (open <)
   			alert('parse failure');
  			 return false;
  		}
 	}
 	mcont="<div style='display:none'>"+mtxt+"<p>&nbsp;</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);
  document.getElementById("ledContainer").style.width=(10+mwidth*16)+'px';
}

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>

Copy All x2

<div id="ledmarquee">
Multi-<red>C<blue>o<yellow>l<green>o<red>r<green>
JavaScript LED marquee - IE & FF compatible - <yellow>no
fonts required<green> - one image (36k) - user-defined speed
& width - 012...789 abc...xyz +-*/=?^&().,'!$...</div>