Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with typing text

    Ok, I typed this really quickly and dont know if I did somthing wrong, but is there a way to make this script shorter, but be able to say my own text inside the type('text') tags?

    here is the
    Code:
    <script>
    
    function type() {
    
    document.all.span1.innerHTML='H_';
    setTimeout('type2()',120);
    }
    function type2() {
    
    document.all.span1.innerHTML='He_';
    setTimeout('type3()',120);
    }
    function type3() {
    
    document.all.span1.innerHTML='Hel_';
    setTimeout('type4()',120);
    }
    function type4() {
    
    document.all.span1.innerHTML='Hell_';
    setTimeout('type5()',120);
    }
    function type5() {
    
    document.all.span1.innerHTML='Hello_';
    setTimeout('type6()',120);
    }
    function type6() {
    
    document.all.span1.innerHTML='Hello_ ';
    setTimeout('type7()',120);
    }
    function type7() {
    
    document.all.span1.innerHTML='Hello _ ';
    setTimeout('type8()',120);
    }
    function type8() {
    
    document.all.span1.innerHTML='Hello W_';
    setTimeout('type9()',120);
    }
    function type9() {
    
    document.all.span1.innerHTML='Hello Wo_';
    setTimeout('type10()',120);
    }
    function type10() {
    
    document.all.span1.innerHTML='Hello Wor_';
    setTimeout('type11()',120);
    }
    function type11() {
    
    document.all.span1.innerHTML='Hello Worl_';
    setTimeout('type12()',120);
    }
    function type12() {
    
    document.all.span1.innerHTML='Hello World_';
    setTimeout('type13()',600);
    }
    function type13() {
    
    document.all.span1.innerHTML='Hello World';
    setTimeout('type12()',600);
    }
    </script>
    
    <body onload="type();">
    
    <span id="span1"></span>
    I know how to make the affect but I want it shorter, I looked at the script on DYNAMIC DRIVE but couldn't figure out how i could put the _ after each letter. And maybe even be able to put that in the status area

    Thank you in advance
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <script>
    function type(chars)
     {
       var el = document.getElementById("span1");
       var ih = el.innerHTML.replace(/_/,"");
       ih += chars.shift() + "_";
       el.innerHTML = ih;
       if(chars.length > 0) 
         setTimeout(function(){type(chars)}, 120);
       else
         blink();
     }
    function blink()
     {
       var el = document.getElementById("span1");
       /_/.test(el.innerHTML) ? el.innerHTML = el.innerHTML.replace(/_/,"") : el.innerHTML += "_";
       setTimeout(blink, 600);
     }
    </script>
    
    <body onload="type('Hello World'.split(''));">
    
    <span id="span1"></span>
    The first code I had above was using an unnecessary function (just for a test); that's been removed now...
    Last edited by neofibril; 06-13-2004 at 08:59 PM. Reason: the usual

  • #3
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you very much that works great
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No problem, DooM_MonkeY.

    One more thing:
    it might be better to exclude any "_" characters, other than the last one...

    Code:
    <script>
    function type(chars)
     {
       var el = document.getElementById("span1");
       var ih = el.innerHTML.replace(/_$/,"");
       ih += chars.shift() + "_";
       el.innerHTML = ih;
       if(chars.length > 0) 
         setTimeout(function(){type(chars)}, 120);
       else
         blink(ih.length - 1);
     }
    function blink(ln)
     {
       var el = document.getElementById("span1");
       el.innerHTML.length > ln ? el.innerHTML = el.innerHTML.replace(/_$/,"") : el.innerHTML += "_";
         setTimeout(function(){blink(ln)}, 600);
     }
    </script>
    
    <body onload="type('_____________'.split(''));">
    
    <span id="span1"></span>

  • #5
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    THanks a lot, how come whenever I put it as a mouseover tho, it says "object does not support this property or method?"
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just change the function name(s)... "type" is the problem; its being interpreted as this.type, I think.

  • #7
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow, Works like a charm, thank you very much
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #8
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    glad it works...

    This one should work better for repeated calls.

    Code:
    <script type="text/javascript">
    
    var busy, blinking;
    
    function typeWrite(el, chars)
     {
       if(!busy) 
        { 
          if(blinking) 
            clearInterval(blinking);
          el = document.getElementById(el);
          el.innerHTML = "";
          chars = chars.split("");
          var str1, str2;
          busy = true; 
          execute();
        }
       function execute()
        {
          str1 = el.innerHTML.replace(/_$/,"");
          str1 += chars.shift() + "_";
          el.innerHTML = str1;
          if(chars.length > 0)
            setTimeout(execute, 120);
          else
           {
             str1 = str1.length - 1;
             blinking = setInterval(blink, 600);
             busy = false;
           }
        }
       function blink()
        {
          str2 = el.innerHTML;
          str2.length > str1 ? el.innerHTML = str2.replace(/_$/,"") : el.innerHTML += "_";
        }
     }
    </script>
    <body>
    <div style="background:windowtext;color:window;text-align:center" 
    onmouseover="typeWrite('elementId', 'Doom_Monkey')">
    Mouse over...
    </div>
    <span id="elementId"></span>
    </body>
    The only thing I've noticed that breaks this is a string containing "<", or ">".

    If there's a likelihood of those being entered, they should be replaced, before setting innerHTML.
    Last edited by neofibril; 06-14-2004 at 07:24 AM. Reason: reordering

  • #9
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank u very much (again), and now I'm trying to learn the Script so I know what everything means, but what does the .split('')); stuff mean? I don't understand where that comes in?
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #10
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    split() is a String object method that returns an Array object;
    shift() is an Array object method, that returns a single character in this case.

  • #11
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thank you (yet again lol), I've been teaching myself EVERYTHING!!! And I've yet to become anything more than a traneE when it comes to javascript so people like you (the smart ones) are going to need to help me out a lot.

    thanks again
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #12
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, DooM_MonkeY.
    Approaching similar tasks in different ways can be rewarding;
    I seem to learn something new with each attempt.
    Of course, references are most helpful, as are forums like this.
    Well, that's my formula: a work in progress...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •