CODEWITHSUNDEEP
javascriptcss
BforBit
BforBit

Reputation: 11

Auto typer with cursor Javascript

I basically want to create a simple Javascript auto writer in a HTML page This is my code:

<html>

<head>
  <style>
    #type {
      display: inline-block;
    }
    
    #cur {
      display: inline-block;
    }
  </style>
</head>

<body>
  <pre>
<div id="type"></div><div id="cur">{cursor}</div>
</pre>
  <script>
    var string = "Write this string!\nNext Line!";
    var array = string.split("");
    var timer;

    function looper() {
      if (array.length > 0) {
        document.getElementById("type").innerHTML += array.shift();
      } else {
        clearTimeout(looper);
      }
      timer = setTimeout('looper()', 50);
    }
    looper();
  </script>
</body>

</html>

The string "{cursor}" should be the cursor position, I will create it later. The problem with it is when I go to a new line; Essentially the cursor not returns to initial position on the line but remains to the last position it took doing just a "jump" to the next line.

Upvotes: 1

Views: 1349

Answers (1)

Wael Azar
Wael Azar

Reputation: 311

This Website might help you https://macarthur.me/typeit/

and you can try this using jquery:

<p id="example3"></p> 

$('#example3').typeIt({
 strings: ["This is a great string.", "And here we have another great string.."],
 speed: 50,
 autoStart: false
});

Upvotes: 1

Related Questions