CODEWITHSUNDEEP
javascripthtml
ani
ani

Reputation: 181

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

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>

Upvotes: 0

Views: 1177

Answers (3)

Madhumitha
Madhumitha

Reputation: 338

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>

Upvotes: -1

Jordan Georgiadis
Jordan Georgiadis

Reputation: 331

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

Upvotes: 1

thedude
thedude

Reputation: 9812

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>

Upvotes: 1

Related Questions