Typer.js jQuery not working on Chrome

Design help Custom code
1

Hello Webflowers,

I’m using a jQuery plugin to make a typing animation (this one), and I got it to work, but only on Safari.

When I fired up the same website on Chrome, it just wouldn’t work! I’m sure I put in the code wrong somehow, because all other websites I see using the same code work on both Chrome and Safari.

https://typing.webflow.io

Here’s a copy/paste of what’s in the footer code:

<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/js/typed.js" type="text/javascript"></script>
<script>
  $(function(){
    $(".element").typed({
            strings: ["Bush did 9/11.", "Boobytrap spelled backwards is partyboob.", "You get the point. This is working."],
      
            // typing speed, in milliseconds. The higher the number, the slower it gets
            typeSpeed: 10,
      
            // time before typing starts, also in milliseconds.
            startDelay: 200,

            // backspacing speed. Same as the typing speed.
            backSpeed: 10,
      
            // time before backspacing. In milliseconds.
            backDelay: 1500,
      
            // Do you want it to loop?
            loop: true,
      
            // How many times should it loop? (false = infinite)
            loopCount: false,
      
            // Show cursor?
            showCursor: false,
      
             // character for cursor
            cursorChar: "|",
      
            // attribute to type (null == text)
            attr: null,
      
            // either html or text
            contentType: 'html',
      
            // call a function when done
            callback: function() {},
      
            // starting callback function before each string
            preStringTyped: function() {},
      
            //callback for every typed string
            onStringTyped: function() {},
      
            // callback for reset
            resetCallback: function() {}
        });
    });
</script>

In case there’s nothing wrong with the code, but with the designer part (I don’t know why that would be the case) here’s the link to check out: https://webflow.com/design/typing

Thanks in advance!

2

It’s been a few days and no takers, but I cracked it.

I checked the code from Chrome and it’s not executing the javascript because…
“its MIME type (‘text/plain’) is not executable, and strict MIME type checking is enabled.”
This is apparently because Chrome blocks external code from running on a website because of security reasons. But it becomes a nuisance when you know that the source is trusted.

For anyone who runs into this problem, here’s the solution if you’re getting an external javascript code from github:
the script source address usually starts with raw.github.com or raw.githubusercontent.com. All you have to do is change the source address to rawgithub.com, so it should look something like this:

<script src="https://rawgithub.com/blah/blah/.../blah.js" ...etc. Hope I help somebody out!
3

This topic might help:

It is different plugin with similar effect and it’s definitely works.

1 Like
4

I was able to get mine to work, but I tested out the one made by Sidney and it works too. Two solutions in the same day, nice. :smiley:

Thanks @sabanna!

1 Like