Parallax doesn't work when I'm routed to the page with it but works when I refresh the very page where it is

[Coookiez]

So the project is written in React.js. I have a Main component which shows me the welcome page with navigation bar. When I'm clicking on a button to switch the view to let's say About.js (here the parallax-window elements are rendered) I only have blank gaps: https://imgur.com/a/qKvBUCM However when I refresh that page (About.js) the parallax works perfectly fine: https://imgur.com/a/4Yx0tkv untill I click some button to route me to another page (say the Main.js) - the parallax image stays on top of everything else even though there are no elements that belong to "parallax-window" class: https://imgur.com/a/bVqxa1B Routing was done using HashRouter component, standard NavLinks exact to="/path" and exact path="/path".

Here's the code of aforementioned About.js class: https://gist.github.com/Coookiez/55f9dbc6c314366ee8c09bd1bbb87ab7

Any idea how to make it work appropriately?

[wstoettinger]

as far as my knowledge of React goes, it modifies the DOM tree directly without reloading the page. Please keep in mind, that parallax-mirror and parallax-slider elements get injected into the DOM (or moved to, depending on the method you used) in different places than the parallax-window. they probably stay there while routing and don't get destroyed.

For the first problem: have you tried firing the resize trigger after the routing is completed?

jQuery(window).trigger('resize').trigger('scroll');

For the second problem I would suggest to fire a destroy trigger before the routing takes place. This is only implemented in the v2 alpha version and I would appreciate to get some feedback on that feature and make the plugin ready for react.

[webmastervishal]

@Coookiez did your problem solved? Even I am getting the same problem while working on the React project, as @wstoettinger said when the homepage is loaded the parallax-mirror and parallax-slider is injected into the DOM. And when we redirect to another route, it stays there.

As @wstoettinger suggested to fire a destroy trigger, I am not much aware of how to do it. Can you please help me with the destroy code.

[wstoettinger]

@webmastervishal please check the readme of v2 here: https://github.com/pixelcog/parallax.js/tree/v2.0.0-alpha

search for destroy and you will find it ;)

[wstoettinger]

PS: this is probably the most experimental feature in V2 so I would be happy to get some input on it and test it on your pages!

[webmastervishal]

Sadly I am using a ready theme for my react project where they have used the version v1.4.2

do parallax('destroy') method works with v1.4.2?

[wstoettinger]

unfortunately not.

[webmastervishal]

I did migrate to v2. Changed data-image-src to data-src to make it work.

Now, I am confused, if the plugin is injecting parallax-mirror and parallax-slider, what exactly parallax('destroy') deletes?

And I am getting the error message that $(....).parallax is not a function. And the document isn't clear enough to tell what exactly we are going to destroy.

[vesper8]

I also upgrade to v2 because I'm having the same issue.. works fine on reload but breaks when arriving via a SPA route

I upgraded to v2, made the modifications from data-image-src to data-src and the parallax is loading as it was before. But the same problem persists

I noticed that adding the destroy method doesn't seem to have any effect, but I also noticed that it doesn't remove the parallax-mirror copies.. so I need to continue removing those with $('.parallax-mirror').remove();

[wstoettinger]

"destroy" is supposed to remove the elements which get injected (parallax-mirror) and move the content of the parallax-slider back to where it was before initializing (i.e. the images should get static again).

It's still experimental and unfortunately I don't have the React.js know-how but I would appreciate a pull request with suggested changes