CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Christopher Beggs
Christopher Beggs

Reputation: 33

Javascript typewriter() on two lines

So I'm creating a basic website, and I used the typewriter function from w3schools:

https://www.w3schools.com/howto/howto_js_typewriter.asp

My problem is that I want to display the text on 2 lines, and I'm not entirely sure how to do that. Anything helps!

Thanks

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();
<span id='demo'></span>

Upvotes: 2

Views: 918

Answers (5)

quasarBlast
quasarBlast

Reputation: 1

Use the / symbol to indicate a line break.

var p = document.querySelector("#example");
var speed = 30;
var string = "Hi there!/How are you?/blah blah blah";
var i = 0;

function typewriter() {
   if (i < string.length) {
     p.innerHTML += string.charAt(i).replace("/", " <br>");
     i++;
     setTimeout(typewriter, speed);
  }
}

typewriter();
<p id="example"></p>

Upvotes: 0

Andy
Andy

Reputation: 63524

It's not clear what criteria breaks the text onto the second line. You could, for example, simply set the width of the div to wrap on a word. This has the convenience of ensuring that all the text will be wrapped no matter how long it is without the need to edit the string.

const txt = 'Lorem ipsum typing effect!... MOAR Lorem ipsum typing effect!';
const speed = 50;

// Cache the element
const demo = document.getElementById("demo");

// If i is not defined set it to 0
(function typeWriter(i = 0) {
  if (i < txt.length) {

    // Use textContent rather than innerHTML
    demo.textContent += txt.charAt(i);
    setTimeout(typeWriter, speed, ++i);
  }
}())
#demo {
  width: 100px;
  word-wrap: break-word;
}
<div id="demo"></div>

Upvotes: 1

Moustafa Jazzar
Moustafa Jazzar

Reputation: 63

You can use <br/> in there.

var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
var firstLineMaxChars = 10

function typeWriter() {
  if (i < txt.length) {
    var char = txt.charAt(i)

    if (i == firstLineMaxChars) {
      char += '</br>'
    }

    document.getElementById("demo").innerHTML += char;
    i++;
    setTimeout(typeWriter, speed);
  }
}
<h1>Typewriter</h1>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

Upvotes: 1

Nick Parsons
Nick Parsons

Reputation: 50694

You could give the areas where you would like to append your text to a class such as typer, so that you can target multiple elements. Then you can use getElementsByClassName to get all the elements with the class typer. Using .forEach you can then loop over all your elements (in this case divs) and append the appropriate character to them.

See working example below:

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    [...document.getElementsByClassName("typer")].forEach(e => {
      e.innerHTML += txt.charAt(i);
    })
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();
<div class="typer"></div>

<div class="typer"></div>

Now, if by multiple lines you mean you want your text to break when it reaches a particular width, you can instead use a paragraph tag (p) and set a width using CSS:

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();
#demo {
  width: 100px;
}
<p id='demo'></p>

Upvotes: 1

Miroslav Glamuzina
Miroslav Glamuzina

Reputation: 4557

You would want to get a <br/> in there.

You could do something like this: 

var i = 0;
var txt = `Lorem ipsum dummy \n text blabla.`;
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    let text = txt.charAt(i);
    document.getElementById("demo").innerHTML += text=== "\n" ? "<br/>": text;
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();
<span id='demo'></span>

Upvotes: 3

Related Questions