DHTML

Moving Background
Moving Objects
Rollover
Pulldown Menu
Preloading
Drag'n'Drop
Scrolling Text
Teletype
Shoot Me!
Animation
ActiveX
Opacity
Transition
Mad Bubbles
Gates

JavaScript


Books

Russian | Main Page


Useful links:






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>