[tagmebroParticipant]

I’ve tried to troubleshoot this stuff for hours and read several posts. I created a new page http://tagmebro.com/parralax/ and tried to mirror the build from this tutorial video http://recordit.co/A6I9Hum97M

Everything is working okay with the parallax when the page first loads, but once it’s finished loading the images sit stagnant and lose the parallax effect.

I’ve tried disabling plugins, etc. and nothing is working. Please help!

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Meanwhile, I noticed that there is a JS error in your site. It is caused by a Google Maps api key settings in UberMenu. Please go to Appearance > UberMenu > General Settings > Assets and disable “Load Google Maps API”.
http://prntscr.com/dpypcx

Thank you.

[tagmebroParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Is it the mustache background? Parallax works okay on my end even after loading. What browser and device you’re testing it on?

Thanks!

[tagmebroParticipant]

I was using chrome and it wasn’t working. However, when I tried it on IE it worked. Is there any style-sheet or code I can add to make sure the site works on all browsers?

[tagmebroParticipant]

Now that you showed me it was chrome causing the issue, I think I might have found another article to fix it. PLEASE LET ME KNOW IF I DID THIS RIGHT IF POSSIBLE. For the first step below, I used a plugin called custom functions to add the suggested code to my themes php directory. Is this what I was supposed to do? I’m not quite sure what “stick it in your child theme’s folder” and “enqueue the script with the dependency of the cornerstone body” means….

“First create a javascript file – I called it fix-parallax.js and stick it in your child theme’s folder.

You need to enqueue the script with the dependency of the cornerstone body scripts so you can call that like so:

wp_enqueue_script(
‘fix-parallax’,
get_stylesheet_directory_uri() . ‘/js/fix-parallax.js’,
[ ‘cornerstone-site-body’ ],
false,
true
);”

Then, I added the code below by going to customizer> custom> edit global JS. I’m pretty I did this correctly, but please confirm if possible.

(function($){

xData.api.map(‘section’, newSectionSetup);

function newSectionSetup( params ) {

var $this = $(this);

var backgroundSetup = function() {

if ( $this.hasClass(‘parallax’) ) {
if ( $this.hasClass(‘bg-image’) ) speed = 0.1;
if ( $this.hasClass(‘bg-pattern’) ) speed = 0.3;
if ( speed ) $this.parallaxContentBand(‘50%’, speed);

}

};

if ( document.readyState === ‘complete’ ) {
backgroundSetup();
} else {
jQuery(window).load( backgroundSetup );
}

}

})(jQuery);

It seems to be working, I just want to make sure I did this correctly so it doesn’t cause other issues. Thanks!

[RadModerator]

Hi there,

It’s correct, it’s the same implementation in the core file.

Thanks!

[tagmebroParticipant]

It doesn’t seem to be working on the front end for mobile. See tagmebro.com/testsite

Any ideas?

[ChristopherModerator]

Hi there,

Thanks for writing in!

Please check this thread https://community.theme.co/forums/topic/parallax-scrolling-on-mobile-devices/#post-791856

Thanks.

[tagmebroParticipant]

After adding the codes above, I’m receiving an error when inspecting my page. Please see tagmebro.com. Error:

Failed to load resource: the server responded with a status of 404 (Not Found)

and the inspector pointed to a link: http://tagmebro.com/wp-content/themes/x-child/js/fix-parallax.js?ver=4.7

I’m assuming this means I added something in the wrong place or didn’t add something I needed to. Can someone please take a look and let me know how I can fix this?

[Nabeel AModerator]

Hi again,

It looks like you’ve not uploaded the file fix-parallax.js to your child theme. Please make sure to upload the file in the following directory /wp-content/themes/x-child/js/

Let us know how this goes!

[tagmebroParticipant]

Sorry, I’m not very experienced but I’m sure I can handle this. Can you perhaps help me figure out how to save the javascript file? I added the javascript code to the .php directory and the code using the customizer.

Do I need to simply create a file in text editor and save it as a javascipt file with that name…and then upload to the directory? If it’s that simple, great…if there’s any other help you can give I’d appreciate it.

[tagmebroParticipant]

think I got it…thanks!

[FriechModerator]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts