Custom data attributes and color change on scroll

[TristanP]

Hi guys and girls,

I was really looking forward to the new custom data attributes, because I wanted to implement this in Pro: https://codepen.io/Funsella/pen/dpRPYZ

I added the following to my child theme’s functions.php:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/inview.js', array ( 'jquery' ), 1.1, true);

(Side-Note: Despite the fact that the child theme is active, Pro looks for the script in the Pro theme folder, not in pro-child?? As a workaround, i created a /js/ folder in the pro directory and uploaded the script there. And can verify that it is loading, because i no longer get the error. But Pro refuses to load scripts from the child-theme folder)

Here’s the issue.

I am trying to run this on tristanarkesteijn.nl/test-color-change/

This page contains one section with the class ‘wrapper’. And three rows, to which I have added the custom attribute data-background-color with a HEX color code.

In addition, i changed the JS to:

jQuery(document).ready(function($){
var $target = $('.wrapper');
inView('.x-row').on('enter', function(el){
var color = $(el).attr('data-background-color');
$target.css('background-color', color );
});
});

[TristanP]

Ok,

it’s working now. My only problem now is that Pro refuses to load the script from the child theme folder?

[jade]

Hello Tristan,

Are you referring to the inview.js file that you are trying to load? I just checked your site and I am able to see it being loaded in the footer area:

Kindly try to clear your browser cache.

Thank you.

[TristanP]

yes, it does load.

But the problem is that it should load from pro-child, not pro.

[jade]

Hi Tristan,

Thanks for making it clear.

How are you enqueueing the script? Are you using the function get_template_directory() for load the file path?

If so, kindly use get_stylesheet_directory_uri() instead. For example:

wp_enqueue_script( 'theme_js', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );

Hope this helps.