Successfully enqueue script, but no effect.

  • Finally got my custom_script.js to enqueue. So now if I search for it in the developers console, I’m able to see it in my resources (so I can see it’s the proper code), and able to see the script listed in my elements towards the bottom of the elements.

    Even though it seems to be coming through okay, the script doesn’t take any effect. Here is some test code to make it fire an alert so I can see if the script is working.

    jQuery(document).ready(function($){
   $(function(){
    var hasBeenTrigged = false;
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 100 && !hasBeenTrigged) { // if scroll is greater/equal then 100 and hasBeenTrigged is set to false.
            alert("You've scrolled 100 pixels.");
            hasBeenTrigged = true;
        }
    });
});
});

    No alert pops up and I haven’t been able to get the script to trigger. When I look in the elements I do see that the script is listed a few lines before the /js/jquery/ui/core.min.js script following it. I’ve wondering if i messed up on the script enqueue, and maybe I’m loading the script before jQuery is loading.

    This is how I’m adding it in my Child Theme functions.php file

    /**
* Make Header Shrink on Page Scroll
**/
 add_action( 'wp_enqueue_scripts', 'scroll_enqueue_script',10 );

function scroll_enqueue_script() {

	wp_register_script('scroll_custom_script', get_stylesheet_directory_uri() . '/js/custom_script.js', array('jquery'), '4.3.1', true);

	wp_enqueue_script('scroll_custom_script');
	}

Viewing 1 replies (of 1 total)

  • You shouldn’t need both opening lines:

    jQuery(document).ready(function($){
   $(function(){

    Normally you’d use only the first line like this:

    jQuery(document).ready(function(){
    var hasBeenTrigged = false;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() >= 100 && !hasBeenTrigged) { // if scroll is greater/equal then 100 and hasBeenTrigged is set to false.
            alert("You've scrolled 100 pixels.");
            hasBeenTrigged = true;
        }
    });
});

    You can also add in some debugging like:

    console.log ('Checkpoint 1...');

    Those messages will show up in your browsers JavaScript console, and you’ll be able to see what is and isn’t happening.

Viewing 1 replies (of 1 total)
  • The topic ‘Successfully enqueue script, but no effect.’ is closed to new replies.