Uncaught TypeError using stellar.js with jquery 3.1.1

Question

In a single page I'm including only jQuery 3.1.1 and stellar.js for a parallax scrolling effects, but when I try tu use it as $(window).stellar(); I get this error in console:

Uncaught TypeError: f.getClientRects is not a function (jquery-3.1.1.min.js:4)

I tried using the migrate plugin as suggested in many answer, but doesn't solve my problem.

The snippet is just to show you the error.

$(function(){
  $('.main').stellar();
 });

<div class="main">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>

Ablaut

Can you replicate the error with a fiddle or something? – Pup

Done, I added a snippet, but I don't believe it helps. – Ablaut

Yeah, I mean it kind of just looks like some sort of compatibility issue with the newest version of jQuery. It works in any 2.0 version – Pup

I know. But how to solve? I can't change the jquery version. – Ablaut

Why wouldn't you be able to change the jQuery version? an idea would be to have a separate page containing stellar.js and a compatible version of jquery then just use a frame to put it into the page. – Pup

Have you installed jQuery UI 1.12.0-rc.2 also? Cheers – Caltrop

Answer 1

stellar.js is failing because of this piece of code:

$(window).load(function() {
                var oldLeft = self._getScrollLeft(),
                    oldTop = self._getScrollTop();

                self._setScrollLeft(oldLeft + 1);
                self._setScrollTop(oldTop + 1);

                self._setScrollLeft(oldLeft);
                self._setScrollTop(oldTop);
            });

In jquery 3.0 the load event is removed. You can change to on('load', function{});

 $(window).on('load', function() {
                    var oldLeft = self._getScrollLeft(),
                        oldTop = self._getScrollTop();

                    self._setScrollLeft(oldLeft + 1);
                    self._setScrollTop(oldTop + 1);

                    self._setScrollLeft(oldLeft);
                    self._setScrollTop(oldTop);
                });

Here is a "working" fiddle: https://jsfiddle.net/y19x160g/1/ and by working i just say that isn't throwing an error anymore.

P.S: I don't know exactly what this library is used for.

In that js fiddle i just copied the not-minified script from current GitHub project: https://github.com/markdalgleish/stellar.js/blob/master/src/jquery.stellar.js and modified the load event.

Other reference: https://api.jquery.com/load-event/ - see deprecated

Hispidulous

Answer 2

If you don't wan't to change the code in the actual plugin, you can also just add jQuery migrate to the project, I encountered this same issue with the following setup...

jQuery v3.3.1

Stellar.js v0.6.2

Adding jquery-migrate/3.0.1 to the project fixed the issue.

Sunroom