John Cook John Cook - 3 months ago 14
jQuery Question

Loading in noconflict doesn't appear to be working

I've got a WooCommerce website and I'm just starting to fiddle with a few things. I've made a small floating menu with the logo that appears on scroll, but I'm having trouble with noconflict. It doesn't appear to be working.

When someone enters their card number at checkout I get a warning to enter a card number, or if I'm a developer to make sure there isn't a JQuery conflict.

I remove the code I made and the checkout works and there's no message.
This is what I have. Please let me know if I messed anything up.

Here is my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var jqu = $.noConflict();
jqu(document).scroll(function() {
var y = jqu(this).scrollTop();
if (y > 400) {
jqu('.bottomMenu').slideDown();
} else {
jqu('.bottomMenu').slideUp();
}
});
jqu(function(){
jqu(".bottomMenu").hide();
});
</script>


What I am doing wrong?

Thanks

Answer

Updated

First you should try this instead, because wordpress use jQuery and not the $ shorthand.

This is your changed code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery( document ).ready(function() {
    var y = $(this).scrollTop();
    if (y > 400) {
        jQuery('.bottomMenu').slideDown();
    } else {
        jQuery('.bottomMenu').slideUp();
    }
    jQuery(function(){
        jQuery(".bottomMenu").hide();
    });

});
</script>

After is better to use wp_enqueue_script() function putting your custom script in an external .js files, into your theme folder (here in a js subfolder in your theme folder).

You could use something like this (in function.php file of your active theme):

function enqueuing_my_scripts() {
    if ( !is_admin() ) {
        wp_enqueue_script( 'my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueuing_my_scripts' );

As query is already in wordpress, you don't need anything else than your custom js file script.

If you are using child theme, then you will replace get_template_directory_uri() function by get_stylesheet_directory_uri() instead.

Comments