.addClass JS/JQUERY

  • Resolved Teddy_c

    (@teddy_c)


    9 years, 9 months ago

    Hi everyone,

    I have a problem that have been trying to solve for the past 3 days, and it starts to getting me crazy. I have created child theme, linked my style sheet via my function.php sheet without any trouble.

    What I want to do now is simply add a class to the header of my pages (which contains my navigation menu, logo, etc.) on scroll down to add a sticky navigation and also resize my logo, etc.: I am following this example

    So, what I have done so far is:

    sticky.js

    function makeSticky() {
    var myWindow = jquery(window),
        myHeader = jquery(".site-header");

    myWindow.scroll(function () {
        if (myWindow.scrollTop() === 0) {
            myHeader.removeClass("sticky-nav");
        } else {
            myHeader.addClass("sticky-nav");
        }
    });
}

    functions.php

    <?php
function child_scripts() {
	wp_enqueue_script( 'sticky', get_template_directory_uri() . '/js/sticky.js', array(jquery), true );
}

add_action( 'wp_enqueue_scripts', 'child_scripts' );
?>

    header.php

    <head>
<script type="text/javascript" src="/js/sticky.js"></script>
</head>

<body>
    jquery( function() {
        makeSticky();
    });
</body>

    The problem is that it does not work. When I check on Firebug if a class has been added to my header, nothing happen.

    I feel like I miss something, such as jquery or calling my js but I can’t figure it out.

    Thanks for any help

    Teddy

Viewing 15 replies - 1 through 15 (of 19 total)

  • You’ve got a few different errors here.

    First, in sticky.js you need to call it jQuery, not jquery (capitalization matters). Second, in your functions.php you need to quote jquery when you call wp_enqueue_script():

    wp_enqueue_script( 'sticky', get_template_directory_uri() . '/js/sticky.js', array( 'jquery' ), true );

    (Here, you can call it jquery, all lowercase. Fun, right?)

    Third, in header.php you can’t have “naked” JavaScript; you need to wrap it in <script> tags:

    <script type="text/javascript">
jQuery( function() {
  makeSticky();
});
</script>
    Thread Starter Teddy_c

    (@teddy_c)

    Thanks for the answer. So, I made the correction, however I still have nothing appearing next to my header. The class doesn’t add to the header section.

    Thread Starter Teddy_c

    (@teddy_c)

    And I have this error message appearing on my consol un brackets

    ‘jQuery’ was used before it was defined. var mywindow=Jquery(window)

    Missing ‘use strict’ statement. var mywindow=Jquery(window)

    Can you link to a page that shows the issue? Also, I missed this earlier. It isn’t necessary to have this line in your header.php, as wp_enqueue_script() calls the script for you automatically:

    <script type="text/javascript" src="/js/sticky.js"></script>

    Thread Starter Teddy_c

    (@teddy_c)

    I am actually working on a local server via wamp because my website is live right now.

    https://www.thesofachronicle.com here is the unmodified version of the website (meaning that the wp_enqueue_script has not been use on the live version)

    I don’t see the sticky navigation code anywhere on the site you linked. Have you emptied your caching plugin since you added the code?

    Thread Starter Teddy_c

    (@teddy_c)

    This version is the live one that I have not modified yet. Unfortunately the modified version of my website is on a local server via wamp.

    Can you post the code you’re using now, then? If it’s way too long, then post it to Pastebin and post the link here.

    Thread Starter Teddy_c

    (@teddy_c)

    Hey Stephen,

    the code is kind of long, here is the link to the different sheet:
    header.php
    style.css
    sticky.js
    functions.php (parent)
    functions.php (child)

    Thank you

    In header.php, check your capitalization on line 23. jquery should be jQuery:

    jQuery( function() {
  makeSticky();
} );

    You also don’t need to explicitly call the script on line 13, as wp_enqueue_script() calls it for you.

    And in functions.php, you’ve possibly got the wrong arguments for wp_enqueue_script(). When you call get_template_directory_uri() from a child theme, WordPress returns the path to the parent theme. So if sticky.js is located in the parent theme’s folder, you would call wp_enqueue_script() like this:

    wp_enqueue_script( 'sticky', get_template_directory_uri() . '/js/sticky.js', array('jquery'), null, false );

    Otherwise, you’d call it like this:

    wp_enqueue_script( 'sticky', get_stylesheet_directory_uri() . '/js/sticky.js', array('jquery'), null, false );

    Thread Starter Teddy_c

    (@teddy_c)

    I have made the changes, however it still does not work. I have just realized though that jQuery-ui is not loading on my website. jQuery is but not jQuery-ui.

    Thread Starter Teddy_c

    (@teddy_c)

    When I open firebug in firefox, I cannot see my javascript loading in the console.

    Thread Starter Teddy_c

    (@teddy_c)

    I have just realized that my script is not loading in the page when I look for it on google chrome, view source.

    How are you calling the script from functions.php? Can you post the wp_enqueue_script() line you’re using?

    Thread Starter Teddy_c

    (@teddy_c)

    function penscratch_child_script() {
    wp_enqueue_script( ‘sticky’, get_stylesheet_directory_uri() . ‘/js/sticky.js’, true);
    }
    add_action( ‘wp_enqueue_scripts’, ‘penscratch_child_script’ );

    my sticky.js script is local=ted in a js folder in my child theme folder

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘.addClass JS/JQUERY’ is closed to new replies.