On Page Load Transition

Hi there,

wp_footer should be the correct place.

You might need to wrap the code in <script> </script> and make sure jQuery is loaded as the theme itself doesn't load it by default.

Interesting. I didn't know I had to load jQuery. I'll have to see if I can do that. That's probably why it's not working hah!

WordPress doesn't declare the $ variable by default. So this:

$(document).ready(function() {
    
    $('.transition').addClass('animated');
    
});

Needs to change to:

jQuery(document).ready(function($) {
    
    $('.transition').addClass('animated');
    
}); 

Thanks Dave,

So I actually read that somewhere and had changed the $ to jQuery.

This is what I have

In the functions.php I have

function my_theme_scripts() {
wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/wp-content/themes/generatepress_child/about-fade.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

and I uploaded a .js file with this inside it:

jquery(document).ready(function() {
jquery('.transition').addClass('animated');
});

When the page loads it zooms into the image and get's all funky: https://koehlerrice.com/about-3/

I think something is slightly off still?

I am seeing a 404 error in the developers tools for your .js file - check the URL to make sure thats correct.

Thanks Dave,

Weird,

When I go here: https://koehlerrice.com/wp-content/themes/generatepress_child/about-fade.js

Seems to be working.

I tried adding the entire URL to the function like so:

function my_theme_scripts() {
wp_enqueue_script( 'my-great-script', get_template_directory_uri() . 'https://koehlerrice.com/wp-content/themes/generatepress_child/about-fade.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

And I'm still seeing the 404 in the Console?

Sorry, I know this is kind of irrelevant to GP and I really appreciate you helping me.

At any point, it's beyond the scope of support, I understand.

Thanks

try increasing the priority of your function call like so:

add_action( 'wp_enqueue_scripts', 'my_theme_scripts', 999 );

No luck,

In this screenshot here: https://drive.google.com/file/d/1UaS9onQ7O8D0aCAJ1-m-5Z4a1bObL5Bm/view?usp=sharing

Why is the link not correct?

It shows as https://koehlerrice.com/wp-content/themes/generatepresshttps:/koehlerrice.com/wp-content/themes/generatepress_child/about-fade.js?ver=1.0.0

Is it not supposed to just be:

https://www.koehlerrice.com/wp-content/themes/generatepress_child/about-fade.js

Maybe this is too much for me, not knowing a thing about js or jquery..

Thanks for the help

Hi there,

Your function should look like this:

function my_theme_scripts() {
    wp_enqueue_script( 'my-great-script', 'https://koehlerrice.com/wp-content/themes/generatepress_child/about-fade.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Seems to be closer, now the console shows

Uncaught ReferenceError: jQuery Is Not Defined

This is my current about-fade.js code:

jquery(document).ready(function() {

jquery('.fading-start1').addClass('fading-finish1');

});

This is what they're saying on Stack Exchange:

https://wordpress.stackexchange.com/questions/365447/trying-to-load-jquery/365527#365527

I've gotten pretty close. But it doesn't seem to start with a color and go to the next color on the transition. Instead, it just starts with no color and goes to the second color.

I have someone from Stack Exchange that's really into this I will take this there for now so I don't bother you guys. I feel bad as this seems far from a GP query.

I'll try to remember to post the link to the solution once I'm done.

Thanks a lot for all your help.

Cheers!

Instead of enqueing the script might be simpler to wrap the jQuery in <script></script> tags like so ( please check your JS copied correctly below):

<script>
jQuery(document).ready(function() {

    jQuery('.fading-start1').addClass('fading-finish1');
    
});
</script>

And then hook this into the wp_footer hook using a Hook element.

jQuery is case sensitive, so jquery won't work.