Trouble Getting Javascript to work on Wordpress

Question

I'm very new to web development and javascript. I adapted another persons code to create what I though was a pretty simple scroll animation effect for an svg. However I have spent several hours trying to take this effect from codepen to my wordpress demo site. I'm sure I have all the resources but something is still wrong and the animation will not appear. I've tried changing the code and debugging on chrome but there are only a couple errors from the external js resource.

Thanks in advance!

You can see the working effect on codepen here (http://codepen.io/anon/pen/xZvKZj)

The link to the wordpress site where this code is currently not working is www.donatedtech.com/scroll

This is my complete code as I put it into an html block on wordpress

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script type="text/javascript">
    jQuery(function($){ 
      $(document).ready(function() {
        //variable for the 'stroke-dashoffset' unit
        var $dashOffset = $(".path1").css("stroke-dashoffset");
        //on a scroll event - execute function
        $(window).scroll(function() {
          //calculate how far down the page the user is 
          var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
          //convert dashoffset pixel value to interger
          var $newUnit = parseInt($dashOffset, 10);
          //get the value to be subtracted from the 'stroke-dashoffset'
          var $offsetUnit = $percentageComplete * ($newUnit / 100);
          //set the new value of the dashoffset to create the drawing effect
          $(".path1").css("stroke-dashoffset", $newUnit - $offsetUnit);
        });
      });
    });
    </script>

    <style>
    mydiv{
      font-family: avenir, helvetica, sans-serif;
      background: grey;
      color: green;
    }

    h1 {
      text-align: center;
      padding-bottom: 50px;
      font-size: 2.4em;
      font-weight: 200;
      letter-spacing: .07em;
    }

    svg {
      position: fixed;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 50%;
      max-width: 480px;
      max-height: 340px;
    }

    .path1 {
      stroke-dashoffset: 1000;
      stroke-dasharray: 1000;
    }

    .frame1 {
      height: 500px;
    }
    </style>

    <div class="mydiv" style="height:1000px;">
    <div class="frame1"></div>

    <svg viewBox="-2 -2 236 342" version="1.1">

      <g stroke="#444" stroke-width="2" fill="none">

        <path class="path1" d="M169.185,102.329c-1.164-1.158-3.055-1.158-4.219,0l-40.27,40.27V48.204   c0-18.086-14.72-32.818-32.818-32.818H2.983C1.337,15.386,0,16.728,0,18.369c0,1.647,1.337,2.983,2.983,2.983h88.888   c14.804,0,26.851,12.053,26.851,26.851v95.703l-41.541-41.577c-1.164-1.158-3.055-1.158-4.219,0c-1.164,1.164-1.164,3.061,0,4.219   l48.093,48.123l48.123-48.123C170.348,105.39,170.348,103.499,169.185,102.329z"></path>

      </g>

    </svg>
    </div><div class="mydiv" style="height:1000px;">
    <div class="frame1"></div>

    <svg viewBox="-2 -2 236 342" version="1.1">

      <g stroke="#444" stroke-width="2" fill="none">

        <path class="path1" d="M169.185,102.329c-1.164-1.158-3.055-1.158-4.219,0l-40.27,40.27V48.204   c0-18.086-14.72-32.818-32.818-32.818H2.983C1.337,15.386,0,16.728,0,18.369c0,1.647,1.337,2.983,2.983,2.983h88.888   c14.804,0,26.851,12.053,26.851,26.851v95.703l-41.541-41.577c-1.164-1.158-3.055-1.158-4.219,0c-1.164,1.164-1.164,3.061,0,4.219   l48.093,48.123l48.123-48.123C170.348,105.39,170.348,103.499,169.185,102.329z"></path>

      </g>

    </svg>
    </div>

Answer 1

In wordpress it's best to enqueue your scripts in your functions file. Here's an example that I use in my themes to make sure that my scripts are loaded properly. This code below gives an example of pulling in an external copy of Jquery, an external script, and also one that I have in the theme itself.

   wp_deregister_script('jquery');
   wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"), false);
   wp_enqueue_script('jquery'); wp_enqueue_script('scrollToPlugin','http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js');
   wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', 'jquery', false, true );

Answer 2

First, let me introduce you to your new best friend: the developer tools of your browser.

In FireFox or Chrome (and likely IE), you can open the Developer Tools by right-clicking on an element, selecting "Inspect Element" from the context menu that appears, and then within the Developer Tools, you'll want click the "Console" tab to view the panel that will reveal to you any javascript errors you have.

In doing so on your site, I found these errors being thrown:

TypeError: jQuery(...).footable is not a function
 scroll:111:21
TypeError: jQuery(...).live is not a function
 functions.js:1178:4
window.controllers is deprecated. Do not use it for UA detection. nsHeaderInfo.js:412:8
TypeError: this[binder] is not a function

This is telling you one of three things. Either:

1. jQuery is not being loaded (by viewing source, and / or running some jQuery commands in the console, we can see this is NOT the case with your site).

OR

2. The script that includes the footable function is not properly loaded, but is being called in your script (not in your question, but on the site).

OR

3. The element that is being bound to by footable (which in this case is .examples) does not exist, and the plugin footable isn't smart enough to not blow up.

It's very possible that any script beyond that is broken / not running due to those errors. Clear them up before trying to troubleshoot your specific script.

And, for a little extra help, here's a comment / observation on your (otherwise good!) code from above:

This is redundant - these two lines do the exact same thing:

jQuery(function($){ 
    $(document).ready(function() {
        // your code...

Simplify this to just:

jQuery(function($) { 
    // your code...