Text is not even typing using typed.js

Question

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

its not working ... so what's happening instead

Jaromanda X
– Jaromanda X

2019-04-04 09:24:22 +00:00
Commented Apr 4, 2019 at 9:24 — Jaromanda X
– Jaromanda X, Commented Apr 4, 2019 at 9:24
Does adding a cdn link instead help? @usmanharoon

etarhan
– etarhan

2019-04-04 15:37:24 +00:00
Commented Apr 4, 2019 at 15:37 — etarhan
– etarhan, Commented Apr 4, 2019 at 15:37

etarhan · Accepted Answer · 2019-04-04 16:48:27Z

2

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.

edited Apr 4, 2019 at 16:48

answered Apr 4, 2019 at 9:24

etarhan

4,1762 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

usmanharoon Over a year ago

Now Its typing correctly. But "Python enthisiast" this string is not printing:(

etarhan Over a year ago

@usmanharoon I have updated my answer, is this what you are looking for?

usmanharoon Over a year ago

Why there is two "Reader" string.Can you explain this?

etarhan Over a year ago

typed.js seems to immediately replace what's inside of the span with class typed. By having the value Reader in the string array it knows that it should remove it with backspaces rather than immediately replace it.

Collectives™ on Stack Overflow

Text is not even typing using typed.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related