Ruby on Rails || Jquery and JavaScript libraries not working

Question

I've created a page on Codepen to be later added to my Ruby on Rails app ( https://codepen.io/salman15/pen/evQVLV ), where all the code works fine.

After creating the page I tried adding the page to my Ruby on Rails app with spree (which is running on Cloud 9 https://consulegem-salman15.c9users.io/ "server might not be offline at the time that you read this"). I've done this in the following manner:

Step 1: Added the html code to the index.html.erb

Step 2: Added the CSS CDN to the _head.html.erb

Step 3: Downloaded all the JavaScript libraries and added them in the following folder path -> app -> assets -> javascripts -> frontend -> store

step 4: added the following line of code to my all.js file (inside in the frontend folder)

//= require_tree

At this point my code should have been working, yet it doesn't.

Uncaught TypeError: $(...).easeScroll is not a function
    at script.self-a9cf77dbbd3e521fbb44b192f7d525c508a4a35eee8e827785ebb4ce329092f5.js?body=1:341

Uncaught TypeError: $(...).logosDistort is not a function
    at HTMLDocument.<anonymous> (script.self-a9cf77dbbd3e521fbb44b192f7d525c508a4a35eee8e827785ebb4ce329092f5.js?body=1:220)
    at j (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
    at Object.fireWith [as resolveWith] (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
    at Function.ready (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
    at HTMLDocument.I (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)

13:10:27:369 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-6

13:10:27:373 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-6

13:10:27:373 (ScrollScene) -> ERROR: Invalid value for option "triggerHook":  .charger

13:10:27:374 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-7

13:10:27:375 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-7

It bugs me that the exact same code with the exact same libraries doesn't seem to work on my Ruby on Rails app, and it phantom's me why?

The error is not a function occurs because the code isn't recognized, normally this is caused because the libraries isn't loaded. Yet I checked the source page after te page has been loaded and the all libraries are loaded.

The TweenMax errors also phantom's me because it's the same libraries and the same code.

I've tried several solutions, like adding the library code to my script.js and it seemed to work, but this would be an improper solution.

I think I've all needed information and code, but if you need any more feel free to ask.

To summarize my question:

Problem: My Jquery libraries don't seem to work

Question: why?

script.js

    //MENU

    var wrap = $("#main-nav-bar");

    wrap.on("scroll", function(e) {
      if (this.scrollTop > 147) {
        wrap.addClass("fix-search");
      } else {
        wrap.removeClass("fix-search");
      }
    });

    //MENU END

    //TWEENMAX

    /* triggerHook: "onEnter" "onLeave" "onCenter"; */
    var controller = new ScrollMagic();

    // Section 6
    new ScrollScene({
      triggerElement: "#section-6",
      duration: 300,
      triggerHook: 0.2
    })
      .setTween(TweenMax.to(".charging", 1, { opacity: "1" }))
      .addTo(controller);

    new ScrollScene({
      triggerElement: "#section-6",
      duration: 600,
      triggerHook: ".charger"
    })
      .setTween(TweenMax.to(".charger", 1, { top: "766px" }))
      .addTo(controller);

    new ScrollScene({
      triggerElement: "#section-7",
      duration: 200,
      triggerHook: 0.7
    })
      .setTween(TweenMax.to(".red-light", 1, { opacity: "1" }))
      .addTo(controller);

    new ScrollScene({
      triggerElement: "#section-7",
      duration: 400,
      triggerHook: 0.5
    })
      .setTween(TweenMax.to(".front-phone", 1, { opacity: "1" }))
      .addTo(controller);

    //TWEENMAX END

    //PARALLAX

    (function() {
      var parallax = document.querySelectorAll(".parallax"), speed = 0.3;

      window.onscroll = function() {
        [].slice.call(parallax).forEach(function(el, i) {
          var windowYOffset = window.pageYOffset,
            elBackgrounPos = "0 " + windowYOffset * speed + "px";

          el.style.backgroundPosition = elBackgrounPos;
        });
      };
    })();

    // END PARALLAX

    //Scrolling

    $(document).ready(function() {
      //$("body").smoothWheel();
    });

    (function($) {
      var self = this,
        container,
        running = false,
        currentY = 0,
        targetY = 0,
        oldY = 0,
        maxScrollTop = 0,
        minScrollTop,
        direction,
        onRenderCallback = null,
        fricton = 0.96, // higher value for slower deceleration
        vy = 0,
        stepAmt = 1,
        minMovement = 0.1,
        ts = 0.1;

      var updateScrollTarget = function(amt) {
        targetY += amt;
        vy += (targetY - oldY) * stepAmt;

        oldY = targetY;
      };
      var render = function() {
        if (vy < -minMovement || vy > minMovement) {
          currentY = currentY + vy;
          if (currentY > maxScrollTop) {
            currentY = vy = 0;
          } else if (currentY < minScrollTop) {
            vy = 0;
            currentY = minScrollTop;
          }

          container.scrollTop(-currentY);

          vy *= fricton;

          //   vy += ts * (currentY-targetY);
          // scrollTopTweened += settings.tweenSpeed * (scrollTop - scrollTopTweened);
          // currentY += ts * (targetY - currentY);

          if (onRenderCallback) {
            onRenderCallback();
          }
        }
      };
      var animateLoop = function() {
        if (!running) return;
        requestAnimFrame(animateLoop);
        render();
        //log("45","animateLoop","animateLoop", "",stop);
      };
      var onWheel = function(e) {
        e.preventDefault();
        var evt = e.originalEvent;

        var delta = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
        var dir = delta < 0 ? -1 : 1;
        if (dir != direction) {
          vy = 0;
          direction = dir;
        }

        updateScrollTarget(delta);
      };

      window.requestAnimFrame = (function() {
        return (
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          }
        );
      })();

      /*
         * http://jsbin.com/iqafek/2/edit
         */
      var normalizeWheelDelta = (function() {
        // Keep a distribution of observed values, and scale by the
        // 33rd percentile.
        var distribution = [], done = null, scale = 30;
        return function(n) {
          // Zeroes don't count.
          if (n == 0) return n;
          // After 500 samples, we stop sampling and keep current factor.
          if (done != null) return n * done;
          var abs = Math.abs(n);
          // Insert value (sorted in ascending order).
          outer: do {
            // Just used for break goto
            for (var i = 0; i < distribution.length; ++i) {
              if (abs <= distribution[i]) {
                distribution.splice(i, 0, abs);
                break outer;
              }
            }
            distribution.push(abs);
          } while (false);
          // Factor is scale divided by 33rd percentile.
          var factor = scale / distribution[Math.floor(distribution.length / 3)];
          if (distribution.length == 500) done = factor;
          return n * factor;
        };
      })();

      //END SCROLLING

      //MOVING PHONE
      $.fn.smoothWheel = function() {
        //  var args = [].splice.call(arguments, 0);
        var options = jQuery.extend({}, arguments[0]);
        return this.each(function(index, elm) {
          if (!("ontouchstart" in window)) {
            container = $(this);
            container.bind("mousewheel", onWheel);
            container.bind("DOMMouseScroll", onWheel);
            currentY = targetY = 0;
            minScrollTop =
              container.get(0).clientHeight - container.get(0).scrollHeight;
            if (options.onRender) {
              onRenderCallback = options.onRender;
            }
            if (options.remove) {
              log("122", "smoothWheel", "remove", "");
              running = false;
              container.unbind("mousewheel", onWheel);
              container.unbind("DOMMouseScroll", onWheel);
            } else if (!running) {
              running = true;
              animateLoop();
            }
          }
        });
      };

      //END MOVING PHONE
    })(jQuery);

    //fade in
    var $animation_elements = $(".animation-element");
    var $window = $(window);

    function check_if_in_view() {
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = window_top_position + window_height;

      $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = element_top_position + element_height;

        //check to see if this current container is within viewport
        if (
          element_bottom_position >= window_top_position &&
          element_top_position <= window_bottom_position
        ) {
          $element.addClass("in-view");
        } else {
          $element.removeClass("in-view");
        }
      });
    }

    $window.on("scroll resize", check_if_in_view);
    $window.trigger("scroll");

    var particles = true,
      particleDensity,
      options = {
        effectWeight: 1,
        outerBuffer: 1.08,
        elementDepth: 220
      };

    $(document).ready(function() {
      $(".section-0").logosDistort(options);

      if (particles) {
        particleDensity = window.outerWidth * 7.5;
        if (particleDensity < 13000) {
          particleDensity = 13000;
        } else if (particleDensity > 20000) {
          particleDensity = 20000;
        }
        return $("#particle-target").particleground({
          dotColor: "#1ec5ee",
          lineColor: "#0a4e90",
          density: particleDensity.toFixed(0),
          parallax: false
        });
      }
    });

    $(document).ready(function() {
      /** 
         * This part does the "fixed navigation after scroll" functionality
         * We use the jQuery function scroll() to recalculate our variables as the 
         * page is scrolled/
         */
      $(window).scroll(function() {
        var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
        var div_top = $("#nav-anchor").offset().top;
        if (window_top > div_top) {
          $("nav").addClass("stick");
        } else {
          $("nav").removeClass("stick");
        }
      });

      /**
         * This part causes smooth scrolling using scrollto.js
         * We target all a tags inside the nav, and apply the scrollto.js to it.
         */
      $("nav a").click(function(evn) {
        evn.preventDefault();
        $("html,body").scrollTo(this.hash, this.hash);
      });

      /**
         * This part handles the highlighting functionality.
         * We use the scroll functionality again, some array creation and 
         * manipulation, class adding and class removing, and conditional testing
         */
      var aChildren = $("nav li").children(); // find the a children of the list items
      var aArray = []; // create the empty aArray
      for (var i = 0; i < aChildren.length; i++) {
        var aChild = aChildren[i];
        var ahref = $(aChild).attr("href");
        aArray.push(ahref);
      } // this for loop fills the aArray with attribute href values

      $(window).scroll(function() {
        var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
        var windowHeight = $(window).height(); // get the height of the window
        var docHeight = $(document).height();

        for (var i = 0; i < aArray.length; i++) {
          var theID = aArray[i];
          var divPos = $(theID).offset().top; // get the offset of the div from the top of page
          var divHeight = $(theID).height(); // get the height of the div in question
          if (windowPos >= divPos && windowPos < divPos + divHeight) {
            $("a[href='" + theID + "']").addClass("nav-active");
          } else {
            $("a[href='" + theID + "']").removeClass("nav-active");
          }
        }

        if (windowPos + windowHeight == docHeight) {
          if (!$("nav li:last-child a").hasClass("nav-active")) {
            var navActiveCurrent = $(".nav-active").attr("href");
            $("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
            $("nav li:last-child a").addClass("nav-active");
          }
        }
      });
    });

    //smooth anchors
    // Select all links with hashes
    $('a[href*="#"]')
      // Remove links that don't actually link to anything
      .not('[href="#"]')
      .not('[href="#0"]')
      .click(function(event) {
        // On-page links
        if (
          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
          && 
          location.hostname == this.hostname
        ) {
          // Figure out element to scroll to
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          // Does a scroll target exist?
          if (target.length) {
            // Only prevent default if animation is actually gonna happen
            event.preventDefault();
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000, function() {
              // Callback after animation
              // Must change focus!
              var $target = $(target);
              $target.focus();
              if ($target.is(":focus")) { // Checking if the target was focused
                return false;
              } else {
                $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
                $target.focus(); // Set focus again
              };
            });
          }
        }

  });

//end smooth anchors

index.html.erb

  <div id="sidebar">
  <div id="nav-anchor"></div>
  <nav>
    <ul>
      <li>
        <a href="#section-1">
          <div class="ball"></div><span id="link">Top</span></a>
      </li>
      <li>
        <a href="#section-2">
          <div class="ball"></div><span id="link">Design</span></a>
      </li>
      <li>
        <a href="#section-4">
          <div class="ball"></div><span id="link">Vermogen</span></a>
      </li>
      <li>
        <a href="#section-7">
          <div class="ball"></div><span id="link">Iris scanner</span></a>
      </li>
      <li>
        <a href="#section-8">
          <div class="ball"></div><span id="link">Fingerprint Scanner</span></a>
      </li>
      <li>
        <a href="#section-5">
          <div class="ball"></div><span id="link">Camera</span></a>
      </li>
      <li>
        <a href="#section-6">
          <div class="ball"></div><span id="link">Batterij</span></a>
      </li>
      <li>
        <a href="#section-9">
          <div class="ball"></div><span id="link">Software</span></a>
      </li>
    </ul>
  </nav>
</div>

<div class="section-0">
  <div class="phone-container">
    <div class="phone-front" id="layer-one"></div>
  </div>
</div>

<section class="section-1 parallax parallax-1" id="section-1">


  <div class="container" id="section-1">


    <div class="text-block animation-element">
      <h1>De toekomst is nu</h1>
      <p>"De Volks Phone is een geweldig hi-end toestel voor een betaalbare prijs."<br> — "Telegraaf"</p><br>
      <div class="pre-order-button">
        <a href="#section-9"> Pre-order</a>
      </div>
    </div>
  </div>

</section>
<section class="section-2" id="section-2">
  <div class="container">
    <div class="left-half" id="left-half-home">
      <div class="text-block animation-element">

        <h1>“De perfecte balans tussen staal en glaswerk”</h1>

      </div>
    </div>
    <div class="right-half" id="right-half-home">
      <div class="rear-phone animation-element bounce-up">

      </div>
    </div>
  </div>
</section>
<section class="section-3 parallax parallax-2" id="section-3">
  <div class="container">
    <h1>Ons Volk</h1>
  </div>
</section>
<section class="section-4" id="section-4">
  <div class="container">
    <div class="top-part" id="left-half-home">
      <div class="text-block animation-element">

        <h1>Beter. Sneller. Uniek.</h1>


      </div>
    </div>
    <div class="middle-part" id="right-half-home">
      <div class="rear-phone animation-element slide-right">

      </div>
    </div>
    <div class="bottom-part">
      <div class="text-block ">

        <ul>

          <li class="spec-left">
            <h1>6GB</h1>
            <img src="http://sterntelecom.com/img/phones/ram-memory.png">
            <h4>RAM</h4></li>

          <li class="spec-center">

            <h1> 4.2 Mghz </h1>
            <img src="http://sterntelecom.com/img/phones/cpu.png">
            <h4>Deca core CPU</h4></li>

          <li class="spec-right">
            <h1>64GB</h1>
            <<img src="http://sterntelecom.com/img/phones/hard-drive.png">
              <h4>Opslag</h4></li>

          <li class="spec-right">
            <h1>5.5 Inch</h1>
            <img src="http://sterntelecom.com/img/phones/inch.png">-
            <h4>Scherm</h4></li>
        </ul>

      </div>
    </div>
  </div>
</section>
<section class="section-7" id="section-7">
  <div class="container">
    <div class="intro-text">
      <h1>Wat science fiction was in nu werkelijkheid.</h1>
      <h2>Maak kennis met de ultra-moderne functie van uw Volks Phone: De irisscanner</h2>
    </div>
    <div class="red-light"></div>
    <div class="front-phone left-half" id="left-half-home">
      <div class="screen" id="screen-section-7">
      </div>
    </div>
    <div class="right-half" id="right-half-home">
      <div class=" animation-element ">
        <div class="text-block animation-element ">

          <h1>Veilig</h1>
          <p>Elk iris vertoont een uniek patroon. Met de irisscanner bent u verzekerd van veiligheid.</p>

        </div>
        <div class="text-block animation-element ">

          <h1>Ook in het donker</h1>
          <p>Met de infrarood iris scanner herkent de Volks Phone uw irissen ook in het donker.</p>

        </div>
        <!--<div class="text-block animation-element ">

          <h1>High-end telefoon voor een Low prijs</h1>
          <p>"The volks is the rare kind of phone that I can recommend without reservations."<br> — The Verge</p>

        </div>-->
      </div>
    </div>
  </div>
</section>
<section class="section-8" id="section-8">
  <div class="container">
    <div class="left-half" id="left-half-home">
      <div class="text-block">

        <h1>Fingerprint scanner</h1><br>
        <p>Ontgrendel de Volks Phone binnen 0.4 seconden met met de super snelle vingerafdrukscanner</p>

      </div>
    </div>
    <div class="right-half animation-element bounce-up" id="right-half-home">

    </div>
  </div>
</section>
<section class="section-5" id="section-5">
  <div class="container">
    <div class="top-part" id="left-half-home">
      <div class="text-block">

        <h1>Haarscherpe foto's</h1><br>
        <p>16-mp back-camera, 13-mp front-camera.</p>

      </div>
    </div>
    <div class="middle-part" id="right-half-home">


    </div>
    <div class="bottom-part">
      <div class="text-block animation-element bounce-up">

      </div>
    </div>
  </div>
</section>
<section class="section-6" id="section-6">
  <div class="container">
    <div class="front-phone left-half" id="left-half-home">
      <div class="screen">
        <div class="animation-element charging" id="charging">
          <h1>Fast Charging</h1>
          <div class="animation-element battery"></div>
        </div>
      </div>
    </div>
    <div class="charger">
    </div>
    <div class="right-half" id="right-half-home">
      <div class=" animation-element bounce-up">
        <div class="text-block animation-element">

          <h1>Groot</h1>
          <p>Met een capaciteit van 3250Mah biedt Volks u een bovengemiddeld batterij vermogen.</p>

        </div>
        <div class="text-block animation-element">

          <h1>Snel</h1>
          <p>Via de fast-charging functie is de Volks Phone binnen 45minuten volledig opgeladen
          </p>

        </div>
        <div class="text-block animation-element">

          <h1>Zuinig</h1>
          <p>De Deca-core processor zorgt ervoor dat het toestel alleen op volle energie presteert wanneer dat nodig is.
          </p>

        </div>
      </div>
    </div>
  </div>
</section>
<section class="section-9" id="section-9">
  <div class="container">
    <div class="top-part" id="left-half-home">
      <div class="text-block animation-element">

        <h1>Simpliciteit op z'n fijnst</h1>
        <p>"The volks is the rare kind of phone that I can recommend without reservations."<br> — The Verge</p>
        <div class="pre-order-button">
          <a href=""> Pre-order</a>
        </div>
      </div>

    </div>
    <div class="middle-part" id="right-half-home">
      <div class="screens">
      </div>
    </div>
  </div>
  <div class="arrow-up">
    <a href="#section-1"><img src="http://sterntelecom.com/img/phones/arrowhead.png"></a>
  </div>
</section>

UPDATE (ADDED REQUESTED FILES)

application.js

  // This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require spree/frontend

//= require_tree .
//= require spree/frontend/spree_auth
//= require spree/frontend/spree_braintree_vzero



//= require jquery

//= require jquery_ujs

//= require turbolinks

//= require_tree

//= require_jquery.min

//= require_jquery-3.2.1.min

//= require_jquery.easeScroll

//= require_jquery.logosDistort.min

//= require_jquery.particleground.min

//= require_jquery.jquery.scrollmagic.min


//= require 'greensock/TweenLite'
//= require 'greensock/easing/EasePack'
//= require 'greensock/jquery.gsap.js'

_head.html.erb

<meta charset="utf-8">
<title>Volks - Het volk's toestel</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://www.jqueryscript.net/demo/jQuery-Plugin-For-3D-Perspective-Transforms-On-Mousemove-LogosDistort/assets/css/perspectiveRules.css'>

<%== meta_data_tags %>
<%= canonical_tag(current_store.url) %>
<%= favicon_link_tag 'volks-logo.png' %>
<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen' %>
<%= csrf_meta_tags %>


<%= javascript_include_tag 'spree/frontend/all' %>


<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<%= yield :head %>

UPDATE 2 (changed the application.js file)

//= require jquery

//= require jquery_ujs

//= require turbolinks

//= require_jquery.min

//= require_jquery-3.2.1.min

//= require_jquery.easeScroll

//= require_jquery.logosDistort.min

//= require_jquery.particleground.min

//= require_jquery.jquery.scrollmagic.min


//= require spree/frontend/spree_auth
//= require spree/frontend/spree_braintree_vzero

ANSWER

You can find the answer in the answer downbelow, but it's not the only part of the answer. The final part of the answer was in the CSS, there was a conflict in my body causing part of the error. So if you're having the same issue, make sure your Libraries are loaded at the proper position(bottom for me) and proper order. Also make sure your CSS isn't causing any errors as wel.

Answer 1

According to the files you've pasted, the libraries are being loaded in the wrong order. I suspect that the following line should be moved to the end of your application.js manifest, to ensure that it gets loaded only after all the jQuery plugins are. Something like:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Be advised, that require_tree does not guarantee the order in which your custom scripts are loaded. So you can still end up with these issues if one script is dependent on the other. You should try to write standalone scripts, so that the order of execution doesn't matter. If you absolutely must write scripts dependent on each other, then you should lean towards importing them in the correct order in your manifest manually.

Also, you imports look wrong. You appear to have imported jQuery thrice. You should paste the contents of the <head> tag in the final rendered page in development mode to ensure that this is actually working.

//= require_jquery.min <-- second import!
//= require_jquery-3.2.1.min <-- third import!
//= require_jquery.easeScroll
//= require_jquery.logosDistort.min
//= require_jquery.particleground.min
//= require_jquery.jquery.scrollmagic.min

Try:

//= require jquery.easeScroll

After adding the relevant gems to your Gemfile, of course.