seo Question posted in
Some basic information to get you started with this can be found here.

Typed.js / strings from static HTML (SEO Friendly)

Right now I’m struggling to use the Typed.js jQuery plugin.

All I want to do is, instead of using the strings array to insert strings, to place an HTML div on the page and read from it.
So that bots and search engines as well as users with disabled JavaScript see the text on the page.

<div id="text1">

  <p>
    Hello,
    <br>
    <br>
    bla bla bla
    <br>
    <br>
    bla bla bla.
  </p>

</div>

<span id="typed"></span>

<script>
$(function(){
    $("#typed").typed({
        stringsElement: $('#text1')
        typeSpeed: 50
    });
}); </script>

I also don’t understand what the span is for.

Tags:

2

Answers


  1. 0

    What you can do is use the text content of the div text1

    // Working for IE and Others
var textContent = $('#text1').innerText || $('#text1').textContent;
// Use string for the typed.js
$(function(){
    $("#typed").typed({
        stringsElement: textContent,
        typeSpeed: 50
    });
});

    This should work for you, you might need to do some extra parsing and playing with the content but it’s straightforward enough.

    JSFiddle

    Login or Signup to reply.
  2. 0

    One problem might be that you don’t have the latest version of Typed.js. Even though version 1.1.1 is the latest version available on cdnjs.com and in Bower, the code on GitHub has been updated since then, but not published. The stringsElement feature described in the latest README only works with the latest code in the repo, not the published version 1.1.1. Other users noticed this problem too.

    Additionally, you need to fix a syntax error by adding a comma after $('#text1'). In JavaScript object literals {}, you need a comma after every key: value pair except the last one.

    Putting those two fixes together, you get this working code:

    $(function() {
  $("#typed").typed({
    stringsElement: $('#text1'),
    typeSpeed: 50
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/dist/typed.min.js"></script>


<div id="text1">
  <p>
    Hello,
    <br>
    <br>
    bla bla bla
    <br>
    <br>
    bla bla bla.
  </p>
</div>

<span id="typed"></span>

    Also, this is probably purposeful, but just note that your <div id="text1"> is formatted differently from the example in the README. Instead of using many <p>s, you are using one <p> containing many lines separated by <br>. The effect of this is that the plugin never backspaces over each line, but writes them all at once. If that’s not what you want, use the format in the README.

    As for what the span is, it’s the element on the page where the typing animation will be shown. You can move that span around the page and style it with CSS as you like. You reference that span in your code when you write $("#typed") – that selects the span with the id="typed". Then you call .typed() to tell the Typed.js plugin to put its animated text inside that element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search