On Page Load Transition – GeneratePress

This topic has 16 replies, 4 voices, and was last updated 3 years, 12 months ago by Tom.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
April 29, 2020 at 5:34 pm #1262147

Anthony

I’m more so wondering if I’m using the hooks correctly.

I found another forum thread on the forums here about posting jQuery in the WP_footer hook but I can’t get this to work.

I’m basically using this exact code: http://jsfiddle.net/uhATT/

And I cannot get it to work.

I’ve placed the script in the wp_footer hook but it doesn’t seem to be working.

Here’s where I’m trying to do this: https://koehlerrice.com/about-3/

For some reason, it’s ending on the color it’s supposed to start on. It seems the JS/JQ isn’t working?

April 29, 2020 at 5:38 pm #1262154

Leo
Staff
Customer Support

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.

April 29, 2020 at 5:44 pm #1262157

Anthony

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!

April 30, 2020 at 2:28 am #1262570
David
Staff
Customer Support
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');
    
}); 
```
April 30, 2020 at 6:53 am #1263016

Anthony

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?

April 30, 2020 at 6:57 am #1263025

David
Staff
Customer Support

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

April 30, 2020 at 8:23 am #1263333

Anthony

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

April 30, 2020 at 9:03 am #1263415

David
Staff
Customer Support

try increasing the priority of your function call like so:

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

April 30, 2020 at 10:21 am #1263552

Anthony

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

April 30, 2020 at 4:51 pm #1263950
Tom
Lead Developer
Lead Developer
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' );
```
April 30, 2020 at 5:46 pm #1264019

Anthony

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’);

});

April 30, 2020 at 8:30 pm #1264124

Anthony

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.

May 1, 2020 at 6:20 am #1264675

Anthony

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!

May 1, 2020 at 7:02 am #1264725
David
Staff
Customer Support
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.
May 1, 2020 at 9:07 am #1265122

Tom
Lead Developer
Lead Developer

jQuery is case sensitive, so jquery won’t work.
Author

Posts

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] On Page Load Transition

Popular Articles

Start building better websites today.