How to make text appear in next line in javascript type writing effect

Question

I'm using java script typewriting effect to display a quote on my web page. I have done it but my problem is that i want the name of the author to be at the bottom right side,But is coming along with the text.How can i do that?

Here is my code

 document.addEventListener('DOMContentLoaded', function(event) { // array with texts to type in typewriter var dataText = ["Start by doing whats necessary;\\n\\then do whats impossible;and\\n\\then suddenly you are doing the impossible;\\n\\-Francis of Assisi"]; // type one text in the typwriter // keeps calling itself until the text is finished function typeWriter(text, i, fnCallback) { // chekc if text isn't finished yet if (i < (text.length)) { // add next character to h1 document.querySelector("h3").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>'; // wait for a while and call this function again for next character setTimeout(function() { typeWriter(text, i + 1, fnCallback) }, 100); } // text finished, call callback if there is a callback function else if (typeof fnCallback == 'function') { // call callback after timeout } } // start a typewriter animation for a text in the dataText array function StartTextAnimation(i) { if (typeof dataText[i] == 'undefined') { setTimeout(function() { StartTextAnimation(0); }, 20000); } // check if dataText[i] exists if (i < dataText[i].length) { // text exists! start typewriter animation typeWriter(dataText[i], 0, function() { // after callback (and whole text has been animated), start next text StartTextAnimation(i + 1); }); } } // start the text animation StartTextAnimation(0); }); 

 <div style="position: relative;width:490px;"> <h3 style=" font-family: 'pacifico',cursive;font-size: 30px">Hello</h3></div> 

Answer 1

Added replacing of \\n with <br>

 document.addEventListener('DOMContentLoaded', function(event) { // array with texts to type in typewriter var dataText = ["\\nStart by doing whats necessary;\\nthen do whats impossible;and\\nthen suddenly you are doing the impossible;\\n\\t-Francis of Assisi"]; // type one text in the typwriter // keeps calling itself until the text is finished function typeWriter(text, i, fnCallback) { // chekc if text isn't finished yet if (i < (text.length)) { // add next character to h1 document.querySelector("h3").innerHTML = text.substring(0, i + 1).replace(/\\n/g, '<br/>').replace(/\\t/g, '<span class="spacer"></span>') + '<span aria-hidden="true"></span>'; // wait for a while and call this function again for next character setTimeout(function() { typeWriter(text, i + 1, fnCallback) }, 100); } // text finished, call callback if there is a callback function else if (typeof fnCallback == 'function') { // call callback after timeout } } // start a typewriter animation for a text in the dataText array function StartTextAnimation(i) { if (typeof dataText[i] == 'undefined') { setTimeout(function() { StartTextAnimation(0); }, 20000); } // check if dataText[i] exists if (i < dataText[i].length) { // text exists! start typewriter animation typeWriter(dataText[i], 0, function() { // after callback (and whole text has been animated), start next text StartTextAnimation(i + 1); }); } } // start the text animation StartTextAnimation(0); }); 

 .spacer { width: 200px; display: inline-block; } 

 <div style="position: relative;width:490px;"> <h3 style=" font-family: 'pacifico',cursive;font-size: 30px">Hello</h3></div> 

Answer 2

or you can produce some code like here

var dataText = ["Start by doing whats necessary;\n\then do whats impossible;and\n\then suddenly you are doing the impossible;\n\<div id="+"author>-Francis of Assisi</div>"];

...making a div for better css managing

Answer 3

 document.addEventListener('DOMContentLoaded', function(event) { // array with texts to type in typewriter var dataText = ["Start by doing whats necessary;\\n\\then do whats impossible;and\\n\\then suddenly you are doing the impossible; <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; -Francis of Assisi"]; // type one text in the typwriter // keeps calling itself until the text is finished function typeWriter(text, i, fnCallback) { // chekc if text isn't finished yet if (i < (text.length)) { // add next character to h1 document.querySelector("h3").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>'; // wait for a while and call this function again for next character setTimeout(function() { typeWriter(text, i + 1, fnCallback) }, 100); } // text finished, call callback if there is a callback function else if (typeof fnCallback == 'function') { // call callback after timeout } } // start a typewriter animation for a text in the dataText array function StartTextAnimation(i) { if (typeof dataText[i] == 'undefined') { setTimeout(function() { StartTextAnimation(0); }, 20000); } // check if dataText[i] exists if (i < dataText[i].length) { // text exists! start typewriter animation typeWriter(dataText[i], 0, function() { // after callback (and whole text has been animated), start next text StartTextAnimation(i + 1); }); } } // start the text animation StartTextAnimation(0); }); 

 <div style="position: relative;width:490px;"> <h3 style=" font-family: 'pacifico',cursive;font-size: 30px">Hello</h3></div>