Text is not even typing using typed.js

Question

Text is not even typing using typed.js

760 views Asked by usmanharoon At 04 April 2019 at 09:19

I 'm trying to type the text using typed.js but its not working.

<head>
<meta charset="utf-8">
<title>webpage</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="particles-js"></div>
<script type="text/javascript" src= "js/particles.js"></script> 
<script type="text/javascript" src = "js/app.js"></script> 
<script type="text/javascript" src="js/typed.js" ></script>

<div class = "name">
Name
<div class = "about"><p>Developer <span class="typed">| Reader</span></p></div>
</div> 
<script type="text/javascript">
var typed = new Typed(".typed",{
                strings: ["Python Enthusiast","Stopped"],
                backSpeed: 40,
                typeSpeed: 40
              });
</script>

I want only reader text to be typed

Original Q&A

There are 1 answers

**etarhan** · Accepted Answer · 2019-04-04 09:24:27

When I try your code with a cdn script tag it does type. There is probably an issue with your local typed.js file. See snippet below for reference:

<head>
  <meta charset="utf-8">
  <title>webpage</title>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div id="particles-js"></div>
  <script type="text/javascript" src="js/particles.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>

  <div class="name">
    Name
    <div class="about">
      <p><span class="typed"></span></p>
    </div>
  </div>
  <script type="text/javascript">
    var typed = new Typed(".typed", {
      strings: [
        "Developer | Reader",
        "Developer | Python Enthusiast",
        "Developer | Stopped"
      ],
      backSpeed: 40,
      typeSpeed: 40
    });
  </script>

EDIT: If you want all strings to be typed out you have to add them to your strings array. Also the part that should not change, in this case Developer | should be in every string so typed.js knows exactly how much to erase when backspacing. It will automatically keep the part that is common between all strings.

If you just want the part after | to be typed and the Reader part to be there already when you load (like you had in your own code) try the following:

<head>
  <meta charset="utf-8">
  <title>webpage</title>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div id="particles-js"></div>
  <script type="text/javascript" src="js/particles.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>

  <div class="name">
    Name
    <div class="about">
      <p>Developer | <span class="typed">Reader</span></p>
    </div>
  </div>
  <script type="text/javascript">
    var typed = new Typed(".typed", {
      strings: [
        "Reader",
        "Python Enthusiast",
        "Stopped"
      ],
      backSpeed: 40,
      typeSpeed: 40
    });
  </script>

In other words it looks like if you have some text already present in the element that you are calling typed on, you need to have this text also be present in your string array, otherwise it will skip some elements.

TechQA.

Text is not even typing using typed.js

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in TYPEDJS

Popular Questions

Popular Tags

Trending Questions