Parallax issues

13 replies · opened Nov 9, 2020

PpeevishNov 9, 2020

Hi Support,

Something in the portfolio on my clients site is interfering with the full movement of the parallax on the 2 lower down bands, where it says 'Helping you design your dream home' and the section that is called 'the designer'. I've tried removing the various portfolio items and it looks as though it may be something related to the gallery items that use slideshows. I've done a test with a portfolio without slideshow items, just using static ones, and the parallaxes work fine - see http://www.thestylednest.co.uk/temp/index-edit.html

Please can you help?

SSemicolon WebSTAFFNov 10, 2020

Hello,

Thanks for reporting this. This appears to be occurring once the Flex Slider has initialized, and then it needs to refresh the Parallax Positions as the Content Height above the Parallax changes. Consider using the following code inside the start: function( slider ) Callback in the js/plugins.flexslider.js File:
[ch_pre]if( $('body').hasClass('has-plugin-parallax') ) {
skrollr.refresh();
}[/ch_pre]

This will definitely fix the issue. Hope this Helps!

If you are using the js/plugins.js or the js/plugins.min.js File, you will need to Update the above codes in these Files as well.

Let us know if we can help you with anything else or if you find any further issues.

PpeevishNov 12, 2020

Thanks. This has solved the problem on Chrome and Edge but not on Firefox - can you have a look to see if you're getting the same Firefox issues?

SSemicolon WebSTAFFNov 13, 2020

Hello,

Thanks for your Patience!

We have just tested this out with the Generic Codes for the Flex Sliders and it appears to be working fine for us. Can you please provide us with the updated codes in the Live URL so that we can check out the exact usage case and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

PpeevishNov 14, 2020

Sorry, please can you clarify what it is you want to see when asking for 'the updated codes in the Live URL'?

FYI I've uploaded the latest versions of your plugins that you recommended updating and there's still no change. BTW the working site is now live and at http://www.thestylednest.co.uk/

Thanks!

SSemicolon WebSTAFFNov 15, 2020

Hello,

Thanks for your Patience!

What we meant was for a Live URL with the Updated Codes that we had provided. Meanwhile, we have checked out your Page here: http://www.thestylednest.co.uk/, and the codes are a bit incorrect. You have included both js/plugins.js and js/plugins.min.js Files on your Page (see attached) which is wrong and could lead to issues as they have the same codes, just one of them is minified. So you will need to use just one of them.

Additionally, regarding the issue with the Parallax after the Flex Sliders, please consider using the updated plugins.min.js File attached in this reply.

This should definitely fix your issues. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpeevishNov 18, 2020

Thanks once again but I'm sorry, unfortunately that hasnt solved it - I've checked on multiple computers on Firefox.

BTW the copies of both the plugins.js and plugins.min.js was my last attempt to solve this and wouldnt normally have been used together, but i forgot to remove one of them.

Anyway I've been attempting to get to the bottom of this problem and although I can't find a solution I have established that the problem is triggared by multiple uses of the flexslider in the portfolio. If I reduce the number down to just a couple of incidences of the portfolio flexslider then the parallax continues to work, albeit slightly less pronounced but it quickly deteriorates and breaks as you add more examples. You mentioned that you had got it to work, but have you managed on an equivalent set up the portfolio, one with slideshow thumbnails which are clickable to a larger version. If you have, can you send me the code for me to try? Thanks

SSemicolon WebSTAFFNov 18, 2020

Hello,

Thanks for your Patience and Apologies for the Inconvenience caused!

We have tested out the Parallax with around 20 FlexSliders above the Parallax Section and it is working fine for us. We have just released an Update yesterday. Please update the Codes to the Latest Version and your issue related to this should be resolved.

Additionally, we have noticed, that you are using mixed versions of Canvas. While JS is updated, CSS is still from the Old Versions. Please make sure that everything is updated according to the Changelogs provided.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpeevishNov 20, 2020

Hi support. Thanks however that still hasnt fixed it, but I want to show you that the problem doesnt lie with the mixed versions of canvas I'm using and that your latest release doesnt solve it, as you believe.

So I have downloaded the complete latest version of Canvas and inserted my client's page, html only, into the template, and uploaded a few relevent images but kept all your CSS and JS scripts - in theory then it should therefore work. I've then uploaded all this to a temporary online test directory, at http://www.peavish.co.uk/nest/thestylednest.html for you to look at and see that the parallax isn't working.

By going to the root at http://www.peavish.co.uk/nest/ you will see that I haven't used any of my files.

Your thoughts please?

SSemicolon WebSTAFFNov 21, 2020

Hello,

Thanks for your Patience!

Please fix the JS errors on the Page (see attached) and check this again. Please reply to us if you are still facing further issues with this even after the JS Errors have been fixed.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

PpeevishNov 21, 2020

Thanks for your help and patience with me, but I'm unsure what it is that needs fixing from looking at the screenshot you sent. I've spotted a couple of superfluous </div> tags that I've removed but can't see where the 'unexpected '<'' is located which appears ot be flagged up. Please advise. Thanks

SSemicolon WebSTAFFNov 22, 2020

Hello,

You can find these errors in your Browser's Developer Console on this Page: http://www.peavish.co.uk/nest/thestylednest.html .

These are JS errors due to Custom Codes added on your Page not related to Canvas. Consider removing these Custom Codes and check if the Parallax is working fine.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpeevishDec 1, 2020

Thanks. I have removed all js, including css not related to canvas but still see no improvements, and cant see anything in the developer console to show any js script errors. Please let me know what you see?

SSemicolon WebSTAFFDec 2, 2020

Hello,

Consider adding the following code at the bottom of the HTML Page just after the js/functions.js JS File Linking:
[ch_pre]
jQuery('.grid-container').on( 'layoutComplete', function(){
if( typeof skrollrInstance !== "undefined" ) {
skrollrInstance.refresh();
}
});
[/ch_pre]

This might do the trick. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard