• home
  • forum
  • my
  • kt
  • download
  • Advance Typing Scroller in Java Scripts

    Author: 2009-03-06 08:35:05 From:

    Through the ingenious combination of old JavaScript techniques and new DHTML extensions, a slashing typing scroller is born! Visible and functional in IE 4+ and NS 6.

    Live Demo

    Add the following where you wish the typing scroller to appear on the page:

    <script language="JavaScript1.2">
    <!--
     
    //Secify scroller contents
    var line=new Array()
    line[1]="This is an awsome script"
    line[2]="It brings up the text you want..."
    line[3]="One letter at a time"
    line[4]="You can add and subtract lines as you like."
    line[5]="It\'s very cool and easy to use"
     
    //Specify font size for scoller
    var ts_fontsize="16px"
     
    //--Don't edit below this line
     
    var longestmessage=1
    for (i=2;i<line.length;i++){
    if (line[i].length>line[longestmessage].length)
    longestmessage=i
    }
     
    //Auto set scroller width
    var tscroller_width=line[longestmessage].length
     
    lines=line.length-1 //--Number of lines
     
    //if IE 4+ or NS6
    if (document.all||document.getElementById){
    document.write('<form name="bannerform">')
    document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
    document.write('  style="background-color: '+document.bgColor+'; color: '+document.body.text+'; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')
    document.write('</form>')
    }
     
    temp=""
    nextchar=-1;
    nextline=1;
    cursor="\\"
    function animate(){
    if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
    nextline++;
    nextchar=-1;
    document.bannerform.banner.value=temp;
    temp="";
    setTimeout("nextstep()",1000)}
    else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
    nextline=1;
    nextchar=-1;
    document.bannerform.banner.value=temp;
    temp="";
    setTimeout("nextstep()",1000)}
    else{
    nextstep()}}
     
    function nextstep(){
     
    if (cursor=="\\"){
    cursor="|"}
    else if (cursor=="|"){
    cursor="/"}
    else if (cursor=="/"){
    cursor="-"}
    else if (cursor=="-"){
    cursor="\\"}
     
     
    nextchar++;
    temp+=line[nextline].charAt(nextchar);
    document.bannerform.banner.value=temp+cursor
    setTimeout("animate()",25)}
     
    //if IE 4+ or NS6
    if (document.all||document.getElementById)
    window.onload=animate
    // -->
    </script>
    

    discuss this topic to forum

    relation tutorial

    No information

    Category

      AJAX (63)
      Content Management (12)
      Cookies (6)
      Date and Time (17)
      Development (18)
      DHTML (23)
      Forms (10)
      Frequently Asked Questions (3)
      Image Display (14)
      Introduction to Javascript (11)
      Links and Buttons (8)
      Menus (2)
      Miscellaneous (24)
      Mouse Tricks (3)
      Navigation (13)
      Randomizing (6)
      Security (5)
      Text Effects (10)
      User Authentication (2)
      User Information (5)
      Windows and Frames (6)

    New

    Hot