Parallax doesn't work when I'm routed to the page with it but works when I refresh the very page where it is
Opened this issue · 9 comments
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?
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.
@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.
@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 ;)
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!
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?
unfortunately not.
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.
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();
"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