Linked js file not working

[Eulogise]

Hi, I have read through similar posts and tried several ways to get this to work, but I’m having trouble getting a script to run in X-Pro. I am using Bakery Visual Composer to build the page, and the Pro-Child theme. Not sure if that is relevant to know.

I have linked a js file in my functions PHP file like this:
function wpb_adding_scripts() { wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/aos.js', array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

The aos.js file is placed here:/ themes>pro-child>js
But there is another part that I think calls the script to work.
AOS.init();

I have added this into the custom js section in X-Pro theme options
I don’t think this needs any function tags around it right? it’s only calling the function.

Then I have linked an external CSS file related to this js feature, into my styles.css file in my child theme.
@import url('aos.css');
The css file is placed in a css directory here: /themes>pro-child>css

Then there is some html on the page that is supposed to be manipulated by this JS and CSS code.
It’s a small block of text on the side of the page that is hidden, and slides into view and becomes visible when the user scrolls past an element with a relevant #id.

It all works in codepen, so I know it isn’t the js or css, it’s how I have integrated it that is causing the issue.

When I load the page, the browser inspector shows the various [data…] values, so it seems the CSS is being read.
Therefore I assume it’s the way I am calling or integrating the js.

I’m hoping you can help me, by telling me if I have added any of these elements incorrectly to work with X-Theme.
Many thanks

[rad]

Hi Ben,

Thanks for reaching out.

How does the AOS should work, would you mind providing a sample so I could compare? And maybe the reason it’s not working is because of script minification and it affects the loading order of the scripts. Could you try deactivating the cache and minify plugin and test it again?

Thanks!

[Eulogise]

Hi, this is a codepen with the effect here

[Eulogise]

I just tried switching of CSS minify and JS minify, but same result. I saved and cleared cache in the website and in the browser I was testing in.
This is the Git page for AOS, in case that helps.

michalsnik/aos

thanks

[jade]

Hi Ben.

I just checked the console for errors and I am seeing this:

I checked further and even if you have added the code to load the aos.js file, the files seems to be nowhere to be found:

https://eulogise.com.au/wp-content/themes/pro/js/aos.js?ver=1.1

Please make sure you have loaded the file correctly.

Hope this helps.

[Eulogise]

Hi, I managed to fix it.

For anyone else who reads this with a similar issue - I found in this instance, it worked to link the script in the footer using the functions php file like so, instead of using the global js customiser,

`add_action( ‘wp_footer’, function () { ?>

<?php } );`

[paul.r]

Hi,

Glad to hear that. Have a great day!