TypeError issue

You’ll have to show us a page with the issue

Actually I didn’t see the screenshot of the error.

Can you create a PasteBin file with the contents of your ‘typed.js’ file? Then link us that.

• This reply was modified 7 years, 9 months ago by Andrew Nevins.

Hi Andrew,

thank you for the quick reply. I have never used pastebin or any other service like that before. I have (I think correctly) created a fiddle here: https://jsfiddle.net/jyxa51vy/

Many thanks.
Phillip

opps sorry her is another link https://jsfiddle.net/jyxa51vy/3/

• This reply was modified 7 years, 9 months ago by Phillip Dews.

Just made another fiddle and added typed.js as an external resource fella. Here is the link..
https://jsfiddle.net/jyxa51vy/6/

Thanks again

The HTML is slightly off in the jsFiddle example:

<span id="typing style=white-space:pre"></span></h1></section>

Try this instead:

<span id="typing" style="white-space:pre"></span></h1></section>

Hmm that’s working after a fashion as you can see here https://jsfiddle.net/jyxa51vy/10/ but the typed-strings are not showing though weirdly when it should be those that are being typed out

Have put your fix in the actual theme as well but nothing is typing there weirdly and I am still getting the….
TypeError: $(...).typed is not a function
in the console

Many thanks

I noticed that you’re mispelling the ‘stringsElement’ option slightly. It doesn’t have an ‘s’ on the end. That then generates an error in the console for that jsFiddle but at least we’re progressing.

Have put your fix in the actual theme as well but nothing is typing there weirdly and I am still getting the….
TypeError: $(…).typed is not a function
in the console

That would suggest the typed.js file isn’t loading properly.

Try this: https://jsfiddle.net/jyxa51vy/15/

Do you see the difference?
According to the docs, the strings must each be wrapped in a paragraph and the option must take a jQuery object: https://github.com/mattboldt/typed.js/blob/master/README.md

In your WordPress template, put this script right at the bottom of the template:

<script type="text/javascript">
      $(function(){
        $("#typing").typed({
          stringsElements:$("#typed-strings"),
          typeSpeed:30,
          backDelay:500,
          loop:true,
          showCursor:true,
        });
      });
    </script>

Note it has to be before the </body> tag

• This reply was modified 7 years, 9 months ago by Andrew Nevins.

We certainly are Andrew, many thanks. I’m surprised that it’s not loading properly as I ma calling it correctly. here is the link to that direct file…

https://www.monkeypantsproductions.co.uk/wp-content/themes/monkeypants/js/typed.js

I have also updated the fiddle with the s removed as suggested but still the same https://jsfiddle.net/jyxa51vy/14/

Appreciate all the help Andrew.

OK have redone everything in your fiddle on the theme and wrapped them in <p> tags but still getting the error weirdly when it’s working perfectly fine in the fiddle!

getting there though I see, turning into quite a challenge hey!

Did you manage to move the following script to the bottom of the template:

<script type="text/javascript">
      $(function(){
        $("#typing").typed({
          stringsElements:$("#typed-strings"),
          typeSpeed:30,
          backDelay:500,
          loop:true,
          showCursor:true,
        });
      });
    </script>

Certainly did, I put it just above the <?php get_footer(); ?> in that template file!
Want me to try it in the footer itself? I also moved the link to the typed.js file just above it to the file now looks like this…

  <section id="section2">
    <section id="typed-wrapper"><h1 class="welcome">Welcome to Monkeypants we: <span id="typing" style="white-space:pre"></span></h1></section>
    <section id="typed-strings">
      <p>Phrase or Sentence 1</p>
      <p>Phrase or Sentence 2</p>
      <p>Phrase or Sentence 3</p>
    </section>
  </section>
</div>
<script src="<?php echo get_template_directory_uri(); ?>/js/typed.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function(){
    $("#typing").typed({
      stringElement:$("#typed-strings"),
      typeSpeed:30,
      backDelay:500,
      loop:true,
      showCursor:true,
    });
  });      
</script>

I will try it in the footer.php instead and see if that makes any difference!