Materialize: Parallax not working, as directed

Created on 9 Dec 2014  路  42Comments  路  Source: Dogfalo/materialize

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

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

picture akihitoalextsuboi

Most helpful comment

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

picture SCLeoX on 5 Jul 2016
👍7

All 42 comments

Same problem here

<div class="parallax-container">
   <div class="parallax"><img src="public/imgs/web-design.png"></div>
</div>

$(document).ready(function(){
  $('.parallax').parallax();
});

for some reason: $('.parallax').parallax(); is not working for me, the images are hidden, I have included jquery.js and materialize.js also materialize.css but parallax not works for me. Any thoughts?

carloscarcamo picture carloscarcamo on 10 Dec 2014

Nvm Found the bug. We are working on it

acburst picture acburst on 10 Dec 2014

Fixed in 41afc4c6ed5e499a199e6290663a9747587260a0

acburst picture acburst on 10 Dec 2014

Thats works awesome! thanks!!

carloscarcamo picture carloscarcamo on 11 Dec 2014

I am using 0.95.3 from cdnjs.cloudflare.com. It's still not working for me.

cchandurkar picture cchandurkar on 14 Mar 2015

I'm still seeing this issue. I have materialize-sass 0.96.1. It works on first load, but navigating to new pages and returning to the page with the parallax effect disappears.

allthesignals picture allthesignals on 4 Jun 2015

i am seeing this issue in 0.96.1. Image is hidden and not displayed..

iesen picture iesen on 15 Jun 2015

I'm also seeing this and have been I was using .95 and now am using .96.1. any clues why this is happening? I need to launch my site today.

nosajnosliw picture nosajnosliw on 18 Jun 2015

My issue was actually related to turbolinks. If you're using Rails, double-check this.

allthesignals picture allthesignals on 18 Jun 2015

I also can't get the parallax to work.

Using CDN 0.97.0

Any solutions to this?

andersdn11 picture andersdn11 on 3 Jul 2015

Same problem with 0.97

DmitryDD picture DmitryDD on 4 Jul 2015

I think I found solution for this problem.
@andersdn11 just delete any size settings for image

DmitryDD picture DmitryDD on 5 Jul 2015

I dont have any size settings, still won't work. Could it be because i'm working localhost?

andersdn11 picture andersdn11 on 5 Jul 2015

I don't think so. I'm also working in localhost

__Best regards

Dmitry SharikovRuby on Rails developer

http://dmitrysharikov.github.io

On Sun, Jul 5, 2015 at 7:31 PM, andersdn11 [email protected]
wrote:

I dont have any size settings, still won't work. Could it be because i'm working localhost?

Reply to this email directly or view it on GitHub:
https://github.com/Dogfalo/materialize/issues/210#issuecomment-118633748

DmitryDD picture DmitryDD on 5 Jul 2015

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 picture csknk on 7 Jul 2015
👍1

I swapped out out the .95 js code for dropdowns into my .96 js and all works fine now. Hope the new build supports parallax and dropdowns.

nosajnosliw picture nosajnosliw on 8 Jul 2015

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

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

andersdn11 picture andersdn11 on 13 Jul 2015
👍3

Same here. Not working in 0.97, tried in angular controller, script at page, but works only after firing it from console.

Sajgoniarz picture Sajgoniarz on 3 Aug 2015

I'm getting this problem even with the parallax demo template on the getting started page. The web based demo runs and looks great, but when I download the zip and open index.html locally, the images aren't showing up for me. Chrome and Safari/OS X. It almost works if I set the z-index to 0 - the button stays visible but the head and subhead disappear and even setting a higher z-index on them doesn't make them reappear. Weird stuff.

DanAncona picture DanAncona on 12 Aug 2015

No images at first, in the footer was this: script src="../../dist/js/materialize.js" and I changed it to: script src="js/materialize.js" and now it works.

HarryMcKinney picture HarryMcKinney on 14 Sep 2015

Yeah I checked my footer and saw that the script went to bin/materialize.js. Just changed it to js/materialize.js and everything was fine afterwards

gravityshouldbenaut picture gravityshouldbenaut on 20 Dec 2015

version 0.97.6 - parallax not working, div class="parallax" hiding the image

osleg picture osleg on 12 Apr 2016

Help it is not working

.parallax img{
background:url("background1.jpg") no-repeat 0% 0%;
background-size:cover;
}

lrjbrual picture lrjbrual on 4 May 2016

for some reason css is:

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

overriding solved the problem:

.parallax img{
      display: inherit !important;
}
izzycode picture izzycode on 28 Jun 2016
👍5 👎2

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. (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. (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. (http://localhost/projekte/homepage/init.js:2:18)
at j (http://localhost/projekte/homepage/extern/jquery/dist/jquery.min.js:2:29588) undefined

jtkDvlp picture jtkDvlp on 2 Jul 2016
👍5

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

SCLeoX picture SCLeoX on 5 Jul 2016
👍7

i think it come from version of jquery. Try to user jquery from demo website and it works fine for me.

m45rud picture m45rud on 11 Aug 2016

The problem is definitely compatibility with jQuery 3, downgrading to 2.2.4 solved the issue for me too.

iyedg picture iyedg on 21 Aug 2016

I'm trying to use the Parallax Template, but only the first image is not showing. When I open the browser console developer, a part of it is shown. I've tried everything explained in this issue and on https://krescruz.github.io/angular-materialize/ , but I'm not getting success.

Plus, I'm using an yoman angular-generator project. Any ideia?

JGeraldoLima picture JGeraldoLima on 22 Aug 2016

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

SCLeoX picture SCLeoX on 22 Aug 2016
👍2

Version 2.2.4 works for me, thanks

Raiper34 picture Raiper34 on 26 Aug 2016
👍4

hey @SCLeoX , sorry for the delay. I made it by editing a few .css properties. I don't know why it not worked automatically, but that's enough for now! Thank you very much.

JGeraldoLima picture JGeraldoLima on 26 Aug 2016

jQuery 2.2.4 fixed the issue and deleted the console indexOf Error.

thebiltheory picture thebiltheory on 7 Sep 2016

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

NitroBAY picture NitroBAY on 9 Oct 2016
👍1

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

olvrcrls picture olvrcrls on 13 Oct 2016
👎5

If it is necessary to work exactly in the block that is needed, then replace $(window) with $('.you-class')

                        <div class="list__header__text">

                        </div>
                    </div>
                    <div class="list__body">

                    </div>
                </div>
            </div>
            <div id="section-slide-2" class="section-slider__item">2</div>
            <div id="section-slide-3" class="section-slider__item">3</div>
            <div id="section-slide-4" class="section-slider__item">4</div>
            <div id="section-slide-5" class="section-slider__item">5</div>
            <div id="section-slide-6" class="section-slider__item">6</div>
        </div>

(function ($) {

$.fn.parallax = function () {
var window_width = $('.you-class').width();
// Parallax Scripts
return this.each(function(i) {
var $this = $(this);
$this.addClass('parallax');

  function updateParallax(initial) {
    var container_height;
    if (window_width < 601) {
      container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height();
    }
    else {
      container_height = ($this.height() > 0) ? $this.height() : 500;
    }
    var $img = $this.children("img").first();
    var img_height = $img.height();
    var parallax_dist = img_height - container_height;
    var bottom = $this.offset().top + container_height;
    var top = $this.offset().top;
    var scrollTop = $('.you-class').scrollTop();
    var windowHeight = window.innerHeight;
    var windowBottom = scrollTop + windowHeight;
    var percentScrolled = (windowBottom - top) / (container_height + windowHeight);
    var parallax = Math.round((parallax_dist * percentScrolled));

    if (initial) {
      $img.css('display', 'block');
    }
    if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) {
      $img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
    }

  }

  // Wait for image load
  $this.children("img").one("load", function() {
    updateParallax(true);
  }).each(function() {
    if (this.complete) $(this).trigger("load");
  });

  $('.you-class').scroll(function() {
    window_width = $('.you-class').width();
    updateParallax(false);
  });

  $('.you-class').resize(function() {
    window_width = $('.you-class').width();
    updateParallax(false);
  });

});

};

IFexe picture IFexe on 10 Mar 2017

@NitroBAY update to Jquery 3 will be shipped with the next release

tomscholz picture tomscholz on 21 Jun 2017

Parallax working fine on Mobile and Desktop view but not working on ipad view only

afzalakhtar picture afzalakhtar on 15 Oct 2018

I am having errors after using JQuery 2.2.4.
The Error Showing:

materialize.js:3890 Uncaught TypeError: Cannot read property 'offsetHeight' of undefined
at Parallax._updateParallax (materialize.js:3890)
at new Parallax (materialize.js:3830)
at Function.init (materialize.js:1044)
at Function.init (materialize.js:3909)
at jQuery.fn.init.jQuery.fn. [as parallax] (materialize.js:1148)
at HTMLDocument. (index.html:331)
at fire (jquery.js:3187)
at Object.fireWith [as resolveWith] (jquery.js:3317)
at Function.ready (jquery.js:3536)
at HTMLDocument.completed (jquery.js:3552)

vivekascoder picture vivekascoder on 12 Apr 2020

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

zsenfuka picture zsenfuka on 26 May 2020

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

Not Working :(

Alextastico picture Alextastico on 7 Aug 2020

@Alextastico Try adding just the style="opacity: 1;" inside your image tag. It works without this on local host but not on deployment.

96312 picture 96312 on 25 Aug 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

acierpinski picture acierpinski  路  3Comments
Robouste picture Robouste  路  3Comments
serkandurusoy picture serkandurusoy  路  3Comments
ericlormul picture ericlormul  路  3Comments
cope picture cope  路  3Comments