Vivus.js Script won't execute in WordPress

Question

I'm trying to use the Vivus.js script in wordpress to animate my svg logo drawing. It is loading the js file but in the error console I'm getting: SyntaxError: Unexpected token '<' referencing the first line of the virus.js file.

Here is my script from the Wordpress Footer.php:

var elogo = new Vivus('elogo', {
    type : 'delayed',
    duration : 140,
    start : 'autostart',
    forceRender : true,
    dashGap: 20
}, function() {
    if (window.console) {
        console.log('Animation finished. [log triggered from callback]');
    }
})

Everything is working outside of WordPress but when I put it in my theme files it won't execute the animation.

My page address is http://entrepology.studio-element.com

It might help to wrap your script in a document ready function: jQuery(function($) { }); — APAD1
– APAD1, Commented May 11, 2015 at 21:31
Not certain the protocol for including the .js file, but I'm pretty sure I don't paste it into my question, right? The GitHub page for it is maxwellito.github.io/vivus — Brian Barrus
– Brian Barrus, Commented May 11, 2015 at 21:34
Yes, you should paste it into the question. Are you using wp_register_script and wp_enqueue_script, or are you just adding a script tag into your page template? Loading JS files in WordPress should always be done with the former. Read more here: Properly add scripts in WordPress themes — APAD1
– APAD1, Commented May 11, 2015 at 21:37

Fred · Accepted Answer · 2015-05-11 21:40:22Z

1

The path is wrong. Your page is linking to:

<script src="http://entrepology.studio-element.com/wp-content/themes/entrepology/js/dist/vivus.js"></script>

If you paste the URL in the browser it redirects to your home page. The first line of HTML is:

<!DOCTYPE html>

And this is causing the error. So all you have to do is to fix the path. Check your header.php or the functions.php (or any other place where you enqueue your script).

Edit: I tried a few other paths. This one should work (the dist is too much):

http://entrepology.studio-element.com/wp-content/themes/entrepology/js/vivus.js

answered May 11, 2015 at 21:40

Fred

3,3621 gold badge21 silver badges29 bronze badges

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

1 Comment

Fred Over a year ago

Happens to all of us ;)

Collectives™ on Stack Overflow

Vivus.js Script won't execute in WordPress

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related