materialize: Parallax not working, as directed

Other js components working. When appended class=‘parallax’, image will disappear. My slim file is like this.

.parallax-container
  .parallax
    = image_tag 'top_hawaii.jpg', width: '100%'

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 42 (1 by maintainers)

Commits related to this issue

Fix for issue #210 — committed to jtkDvlp/materialize by jtkDvlp 8 years ago

Most upvoted comments

Seriously, for me, using jQuery 2.2.4 solved the problem. jQuery 3 has a lot of compatible problems now. >.>

SCLeoX on Jul 5, 2016

for some reason css is:

 .parallax img{
      display:none;
      ...
}

overriding solved the problem:

.parallax img{
      display: inherit !important;
}

izzycode on Jun 28, 2016

on the .css file edit the display property .parallax img { display: block; }

olvrcrls on Oct 13, 2016

Same problem:

        $this.children("img").one("load", function() {
          updateParallax(true);
        }).each(function() {
          if(this.complete) $(this).load(); // seems to be the problem-function
        });

jQuery.Deferred exception: Cannot read property ‘indexOf’ of undefined TypeError: Cannot read property ‘indexOf’ of undefined at r.fn.load (http://localhost/projekte/homepage/extern/jquery/dist/jquery.min.js:4:18685) at HTMLImageElement.<anonymous> (http://localhost/projekte/homepage/extern/Materialize/js/parallax.js:42:37) at Function.r.extend.each (http://localhost/projekte/homepage/extern/jquery/dist/jquery.min.js:2:2813) at r.fn.r.each (http://localhost/projekte/homepage/extern/jquery/dist/jquery.min.js:2:1003) at HTMLDivElement.<anonymous> (http://localhost/projekte/homepage/extern/Materialize/js/parallax.js:41:12) at Function.r.extend.each (http://localhost/projekte/homepage/extern/jquery/dist/jquery.min.js:2:2813) at r.fn.r.each (http://localhost/projekte/homepage/extern/jquery/dist/jquery.min.js:2:1003) at $.fn.parallax (http://localhost/projekte/homepage/extern/Materialize/js/parallax.js:6:19) at HTMLDocument.<anonymous> (http://localhost/projekte/homepage/init.js:2:18) at j (http://localhost/projekte/homepage/extern/jquery/dist/jquery.min.js:2:29588) undefined

jtkDvlp on Jul 2, 2016

Version 2.2.4 works for me, thanks

Raiper34 on Aug 26, 2016

so i got it working. My problem seemed to be the z-index: -1 on parallax. class

Fix: .parallax{ z-index: 0; }

andersdn11 on Jul 13, 2015

@JGeraldoLima What version of jQuery you are using? If not, please try 2.2.4. 😃

SCLeoX on Aug 22, 2016

<div class="parallax"><img src="images/cow.jpg" style="transform: translate3d(-50%, 432.451px, 0px);opacity: 1;"></div> Adding this made the image appear…

tundachef on May 26, 2020

Damn I REALLY would like to use 3.1 any idea @Dogfalo or any other of the team ? Because #3570 should have solve that.

ilan-schemoul on Oct 9, 2016

I had this problem with v0.96.0 - fixed it by adding

(function($){
  $(function(){
    $('.parallax').parallax();
  });
})(jQuery);

…in the head rather than in the footer. Images are now visible, parallax working as expected.

csknk on Jul 7, 2015