Question

1

Uncaught TypeError using stellar.js with jquery 3.1.1

rated 0 times [ 3] [ 2] / answers: 1 / hits: 5941 / 8 Years ago, wed, september 28, 2016, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelynncherokeeg

Add To Favorites

Follow

Total Points: 697

Total Questions: 109

Total Answers: 104

Location: France

Member since Thu, Mar 18, 2021

3 Years ago

answered 8 Years ago janeth · Accepted Answer

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