Teletype | Description
If you want to use any of this examples, please put a link to our site.Here you can find HTML-code for such link.
<html>
<head>
<title>www.redmount.com - DHTML - Teletype</title>
<script language=javascript>
<!--
//global variables
var topStopPoint="null",layerRef="null",styleSwitch="null",currtop=-100;
function init()
{
browser='IE';
layerRef="document.all";
styleSwitch=".style";
visibleVar="visible";
topStopPoint="0px";
plannerStop="0px";
leftStopPoint="-640px";
initialBotX="480px";
pxSwitch="px";
widthClipSwitch=".posWidth";
heightClipSwitch=".posHeight";
plannerFormSwitch="";
go();
}
// -->
</script>
<STYLE TYPE="text/css">
#mircLayer {position: absolute; visibility: visible; top: -200; left: 00; width: 1; z-index: -89040;}
#x0letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89050;}
#x1letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89050;}
#x2letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89051;}
#x3letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89052;}
#x4letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89053;}
#x5letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89054;}
#x6letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89055;}
#x7letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89056;}
#x8letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89057;}
#x9letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89058;}
#x10letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89059;}
#x11letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89060;}
#x12letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89061;}
#x13letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89062;}
#x14letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89063;}
#x15letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89064;}
#x16letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89065;}
#x17letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89066;}
#x18letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89067;}
#x19letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89068;}
#x20letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89069;}
#x21letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89070;}
#x22letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89071;}
#x23letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89072;}
#x24letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89073;}
#x25letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89074;}
#x26letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89075;}
#x27letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89076;}
#x28letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89077;}
#x29letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89078;}
#x30letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89079;}
#x31letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89080;}
#x32letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89081;}
#x33letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89082;}
#x34letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89083;}
#x35letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89084;}
#x36letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89085;}
#x37letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89086;}
#x38letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89087;}
#x39letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89088;}
#x40letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89089;}
#x41letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89070;}
#x42letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89071;}
#x43letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89072;}
#x44letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89073;}
#x45letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89074;}
#x46letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89075;}
#x47letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89076;}
#x48letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89077;}
#x49letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89078;}
#x50letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89079;}
#x51letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89080;}
#x52letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89081;}
#x53letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89082;}
#x54letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89083;}
#x55letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89084;}
#x56letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89085;}
#x57letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89086;}
#x58letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89087;}
#x59letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89088;}
#x60letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89089;}
#text {position: absolute; z-index: -100000; top: 80; left: 30;}
</style>
</head>
<body onload="init()" bgcolor="#99cc66">
<script language=javascript>
<!--
var nfrases=2,curfrase=0,nbukv=0;
frases=new Array(nfrases);
frases[0]="http://www.redmount.com";
frases[1]="all about dhtml & javascript";
var sm=60,way_x=240,zaderzka=100;
var h_beg=100,h_end=21;
var w_beg=100;
w_end=new Array;
w_new=new Array;
h_new=new Array;
var j_beg=150;
i_beg=new Array;
i=new Array;
j=new Array;
var moving_letter,zaderzka,c,pauza,p,d,nextmove=0;
ll=new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");
bl=new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
f=new Array("0","1","2","3","4","5","6","7","8","9");
s1=new Array('"','&',"'",'\',"^",":",",","@"," ,"+","!","{","}","-","#","%","+",".",";","[","]");
s2=new Array("?","(",")","/","*","~","<",">","_","|"," ");
w_ll=new Array(14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14);
w_bl=new Array(14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14);
w_f=new Array(14,14,14,14,14,14,14,14,14,14);
w_s1=new Array(14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14);
w_s2=new Array(14,14,14,14,14,14,14,14,14,14,14);
sr_ll=new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");
sr_bl=new Array("aa","bb","cc","dd","ee","ff","gg","hh","ii","jj","kk","ll","mm","nn","oo","pp","qq","rr","ss","tt","uu","vv","ww","xx","yy","zz");
sr_f=new Array("0","1","2","3","4","5","6","7","8","9");
sr_s1=new Array("x2dash","xand","xapostrof","xbackslash","xbird","xcolon","xcomma","xdog","xdollar","xequal","xexclam","xfigleft","xfigright","xminus","xnumber","xpercent","xplus","xpoint","xpointcomma","xquadleft","xquadright");
sr_s2=new Array("xquestion","xscobleft","xscobright","xslash","xstar","xtilda","xtrileft","xtriright","xunder","xvert","xspace");
var nsymbols=94;
letter=new Array(nsymbols);
w_letter=new Array(nsymbols);
sr_letter=new Array(nsymbols);
for(var z=0;z<nsymbols;z++)
{
if(z<26)
{
letter[z]=ll[z];
w_letter[z]=w_ll[z];
sr_letter[z]=sr_ll[z]+'.gif';
}
else
if(z<52)
{
letter[z]=bl[z-26];
w_letter[z]=w_bl[z-26];
sr_letter[z]=sr_bl[z-26]+'.gif';
}
else
if(z<62)
{
letter[z]=f[z-52];
w_letter[z]=w_f[z-52];
sr_letter[z]=sr_f[z-52]+'.gif';
}
else
if(z<83)
{
letter[z]=s1[z-62];
w_letter[z]=w_s1[z-62];
sr_letter[z]=sr_s1[z-62]+'.gif';
}
else
{
letter[z]=s2[z-83];
w_letter[z]=w_s2[z-83];
sr_letter[z]=sr_s2[z-83]+'.gif';
}
}
function go()
{
frase_init(curfrase);
if(browser=="NN")
{
moveLayerTo("x0letterLayer",i_beg[0]+way_x,j_beg-way_x/2);
var ii=i_beg[0]+way_x;
for(var i=1;i<nbukv;i++)
{
var lrnm="x"+i+"letterLayer";
ii+=w_end[i-1];
moveLayerTo(lrnm,ii,j_beg-way_x/2);
}
}
moveLayerTo("mircLayer",i_beg[0]+way_x,j_beg-way_x/2);
moving_letter=0;
appearing();
}
function frase_init(n)
{
c=0,pauza=25,p=0,d=0,next_move=0;
nbukv=frases[n].length;
for(var z=0;z<nbukv;z++)
{
for(var k=0;k<nsymbols;k++)
{
if(frases[n].charAt(z)==letter[k])
{
w_end[z]=w_letter[k];
eval(layerRef+'["x'+z+'letterLayer"].document.bukva'+z+'.src="'+sr_letter[k]+'"');
break;
}
}
}
i_beg[0]=-200;
i[0]=-150;
j[0]=150;
for(z=1;z<nbukv;z++)
{
i_beg[z]=i_beg[z-1]+w_end[z-1];
i[z]=i_beg[z];
j[z]=150;
}
}
function appearing()
{
for(var num=0;num<nbukv;num++)
{
if(num<=moving_letter)
{
i[num]=i[num]+sm;
j[num]=j[num]-sm/2;
if(i[num]<=(i_beg[num]+way_x))
{
w_new[num]=w_beg-w_beg*(i[num]-i_beg[num])/way_x+w_end[num]*(i[num]-i_beg[num])/way_x;
h_new[num]=h_beg-h_beg*(i[num]-i_beg[num])/way_x+h_end*(i[num]-i_beg[num])/way_x;
if(browser=="IE")
{
eval(layerRef+'["x'+num+'letterLayer"].document.bukva'+num+'.width='+w_new[num]);
eval(layerRef+'["x'+num+'letterLayer"].document.bukva'+num+'.height='+h_new[num]);
}
if(i[num]==(i_beg[num]+way_x))
{
moveLayerTo("mircLayer",i_beg[num]+way_x+w_end[num],j_beg-way_x/2);
if(browser=="NN")
eval(layerRef+'["x'+num+'letterLayer"]'+styleSwitch+'.visibility="visible"');
}
if(browser=="IE")
{
eval(layerRef+'["x'+num+'letterLayer"]'+styleSwitch+'.visibility="visible"');
moveLayerTo("x"+num+"letterLayer",i[num],j[num]);
}
if(i[num]<(i_beg[num]+way_x) && i[num]+sm>(i_beg[num]+way_x))
{
i[num]=i_beg[num]+way_x-sm;
j[num]=j_beg-way_x/2+sm/2;
}
}
}
c++;
if(c>zaderzka)
{
moving_letter++;
c=0;
}
}
if(moving_letter>nbukv)
{
p++;
}
if(p<pauza)
setTimeout("appearing()",eval(3));
else
deleting();
}
function deleting()
{
var num=nbukv-1
eval(layerRef+'["x'+num+'letterLayer"]'+styleSwitch+'.visibility="hidden"');
moveLayerTo("mircLayer",i_beg[num]+way_x,j_beg-way_x/2);
if(num==0)
{
curfrase++;
if(curfrase>=nfrases)
curfrase=0;
setTimeout("go()",eval(3));
}
else
{
nbukv--;
setTimeout("deleting()",eval(130));
}
}
function moveLayerTo(LayerName,left,top)
{
eval(layerRef+'["'+LayerName+'"]'+styleSwitch+'.top=top');
eval(layerRef+'["'+LayerName+'"]'+styleSwitch+'.left=left');
}
//-->
</script>
<div id="mircLayer">
<img name = "mirc" src="xmirc.gif" width=14 height=21 border=0>
</div>
<div id="x0letterLayer">
<img name = "bukva0" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x1letterLayer">
<img name = "bukva1" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x2letterLayer">
<img name = "bukva2" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x3letterLayer">
<img name = "bukva3" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x4letterLayer">
<img name = "bukva4" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x5letterLayer">
<img name = "bukva5" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x6letterLayer">
<img name = "bukva6" src="xspace.gif" width=14 height=21 border=0 >
</div>
<div id="x7letterLayer">
<img name = "bukva7" src="xspace.gif" width=14 height=21 border=0 >
</div>
<div id="x8letterLayer">
<img name = "bukva8" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x9letterLayer">
<img name = "bukva9" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x10letterLayer">
<img name = "bukva10" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x11letterLayer">
<img name = "bukva11" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x12letterLayer">
<img name = "bukva12" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x13letterLayer">
<img name = "bukva13" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x14letterLayer">
<img name = "bukva14" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x15letterLayer">
<img name = "bukva15" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x16letterLayer">
<img name = "bukva16" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x17letterLayer">
<img name = "bukva17" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x18letterLayer">
<img name = "bukva18" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x19letterLayer">
<img name = "bukva19" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x20letterLayer">
<img name = "bukva20" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x21letterLayer">
<img name = "bukva21" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x22letterLayer">
<img name = "bukva22" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x23letterLayer">
<img name = "bukva23" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x24letterLayer">
<img name = "bukva24" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x25letterLayer">
<img name = "bukva25" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x26letterLayer">
<img name = "bukva26" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x27letterLayer">
<img name = "bukva27" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x28letterLayer">
<img name = "bukva28" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x29letterLayer">
<img name = "bukva29" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x30letterLayer">
<img name = "bukva30" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x31letterLayer">
<img name = "bukva31" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x32letterLayer">
<img name = "bukva32" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x33letterLayer">
<img name = "bukva33" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x34letterLayer">
<img name = "bukva34" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x35letterLayer">
<img name = "bukva35" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x36letterLayer">
<img name = "bukva36" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x37letterLayer">
<img name = "bukva37" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x38letterLayer">
<img name = "bukva38" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x39letterLayer">
<img name = "bukva39" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x40letterLayer">
<img name = "bukva40" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x41letterLayer">
<img name = "bukva41" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x42letterLayer">
<img name = "bukva42" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x43letterLayer">
<img name = "bukva43" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x44letterLayer">
<img name = "bukva44" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x45letterLayer">
<img name = "bukva45" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x46letterLayer">
<img name = "bukva46" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x47letterLayer">
<img name = "bukva47" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x48letterLayer">
<img name = "bukva48" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x49letterLayer">
<img name = "bukva49" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x50letterLayer">
<img name = "bukva50" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x51letterLayer">
<img name = "bukva51" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x52letterLayer">
<img name = "bukva52" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x53letterLayer">
<img name = "bukva53" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x54letterLayer">
<img name = "bukva54" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x55letterLayer">
<img name = "bukva55" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x56letterLayer">
<img name = "bukva56" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x57letterLayer">
<img name = "bukva57" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x58letterLayer">
<img name = "bukva58" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x59letterLayer">
<img name = "bukva59" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="x60letterLayer">
<img name = "bukva60" src="xspace.gif" width=14 height=21 border=0>
</div>
<div id="text">Text</div>
</body>
</html>