Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Ivan Tomicic
Ivan Tomicic
3,873 Points

JavaScript not working even it is included and shown in page source?

Hey,

I have simple JavaScript that will show navigation menu when scrolled down on page, it works on my static page but when I include it in functions.php (it does show in page source) it is not working,

do you guys know what problem might be?

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Can you please provide the code you used in your function.php to load your javascript so I can see whats wrong.

3 Answers

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Ok so I found your problem. First I made sure that you were calling all your javascript files all correctly which you were because like you said they were all showing up in the source code so that was good. Then I made a simple javascript file of my own that just displays an alert message whenever the document gets loaded which worked. So that told me it was your javascript files and it was. Whenever Wordpress uses Jquery it uses something called "No Conflict Mode" which is why you have to load JQuery like this

jQuery(document).ready(function($) {
    // Code here will be executed on document ready. Use $ as normal.
});

Just the first line of code needs to be called like this so that you can then use JQuery normally:

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

so in other words your navshow.js file changes to this:

jQuery(document).ready(function($) {  
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 200) {
        $('.floatnav').fadeIn();
    } else $('.floatnav').fadeOut();
});
});

You can read about this here

and also I used JQuery as a dependent when you called your files in functions.php like so:

// Load the Theme JS

function theme_js() {

    wp_enqueue_script( 'fadein', get_template_directory_uri() . '/js/fadein.js', array('jquery'), '', true );
    wp_enqueue_script( 'helo', get_template_directory_uri() . '/js/helo.js', array('jquery'), '', true );
    wp_enqueue_script( 'hamburger', get_template_directory_uri() . '/js/hamburger.js', array('jquery'), '', true );
    wp_enqueue_script( 'navshow', get_template_directory_uri() . '/js/navshow.js', array('jquery'), '', true );
    wp_register_script( 'maps', get_template_directory_uri() . '/js/maps.js', array('jquery'), '', true );
    if( is_page( 'contact' ) ) { wp_enqueue_script( 'maps' ); }
    wp_register_script( 'smoothScroll', get_template_directory_uri() . '/js/smoothScroll.js', array('jquery'), '', true );
    if( is_page( 'home' ) ) { wp_enqueue_script( 'smoothScroll' ); }

}

add_action( 'wp_enqueue_scripts', 'theme_js' );

Fix your other javascript files so they can pass Wordpress's "No Conflict Mode" and everything should be good.

Ivan Tomicic
Ivan Tomicic
3,873 Points

Thanks!!!

Ivan Tomicic
Ivan Tomicic
3,873 Points
Ivan Tomicic
Ivan Tomicic
3,873 Points

Of course...

Here it is. Thank you!

<?php

// Load the Theme CSS //
function theme_styles() {

    wp_enqueue_style( 'normalize', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' );
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.css' );
    wp_enqueue_style( 'hamburger', get_template_directory_uri() . '/css/hamburger.css' );
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style( 'media-queries', get_template_directory_uri() . '/css/media-queries.css' );
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );

}

// Load the Theme JS //
function theme_js() {

    wp_enqueue_script( 'fadein', get_template_directory_uri() . 'js/fadein.js', array(), '', true );
    wp_enqueue_script( 'hamburger', get_template_directory_uri() . 'js/hamburger.js', array(), '', true );
    wp_register_script( 'maps', get_template_directory_uri() . 'js/maps.js', array('jquery'), '', true );
    if( is_page( 'contact' ) ) { wp_enqueue_script( 'maps' ); }
    wp_enqueue_script( 'navshow', get_template_directory_uri() . 'js/navshow.js', array(), '', true );
    wp_register_script( 'smoothScroll', get_template_directory_uri() . 'js/smoothScroll.js', array(), '', true );
    if( is_page( 'home' ) ) { wp_enqueue_script( 'smoothScroll' ); }

}

add_action( 'wp_enqueue_scripts', 'theme_js' );
add_action( 'wp_enqueue_scripts', 'theme_styles' );




// Enable custom menus
add_theme_support('menus');

?>
Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Ok so im guessing this is your javascript that is not working properly: 

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

Two things I would do:

  1. You do not have JQuery as a dependency in the array as the 3rd argument which may be a problem if your code requires the Jquery library.

  2. I have had many issues with style sheets and scripts and believe it or not I have fixed them just by changing the order in which it was called. So try also calling your 'navshow' script before your contact page conditional like so:

function theme_js() {

    wp_enqueue_script( 'fadein', get_template_directory_uri() . 'js/fadein.js', array(), '', true );
    wp_enqueue_script( 'hamburger', get_template_directory_uri() . 'js/hamburger.js', array(), '', true );
    wp_enqueue_script( 'navshow', get_template_directory_uri() . 'js/navshow.js', array('jquery'), '', true );
    wp_register_script( 'maps', get_template_directory_uri() . 'js/maps.js', array('jquery'), '', true );
    if( is_page( 'contact' ) ) { wp_enqueue_script( 'maps' ); }
    wp_register_script( 'smoothScroll', get_template_directory_uri() . 'js/smoothScroll.js', array('jquery'), '', true );
    if( is_page( 'home' ) ) { wp_enqueue_script( 'smoothScroll' ); }

}

Try these two methods and let me know how that works out.

Ivan Tomicic
Ivan Tomicic
3,873 Points

Non of those actually worked :/ Do you have any other ideas?

Scripts are still showing in page source but not working, and navshow.js is not only one that is not working, non of these will work :/

Ivan Tomicic
Ivan Tomicic
3,873 Points

I can upload you whole theme if you are willing to check it out?

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Well your calling your javascript the correct way. Make sure and see if your javascript files depend on any other files to work because that would need to be called as well. I rewrote the code myself to make sure that that's not the problem. Paste exactly this within your php tags :

// Load the Theme CSS
function theme_styles() {
    wp_enqueue_style( 'normalize', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style( 'googlefonts', 'http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic' );     
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.css' );
    wp_enqueue_style( 'hamburger', get_template_directory_uri() . '/css/hamburger.css' );
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style( 'media-queries', get_template_directory_uri() . '/css/media-queries.css' );
    wp_enqueue_style( 'main', get_template_directory_uri() . '/css/style.css' );    

}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

// Load the Theme JS
function theme_js() {

    wp_register_script( 'maps', get_template_directory_uri() . '/js/maps.js', array('jquery'), '', true );
    if( is_page( 'contact' ) ) {
        wp_enqueue_script( 'maps' );
    }   
    wp_register_script( 'smoothScroll', get_template_directory_uri() . '/js/smoothScroll.js', array('jquery'), '', true );
    if( is_page( 'home' ) ) {
        wp_enqueue_script( 'smoothScroll' );
    }
    wp_enqueue_script( 'fadein', get_template_directory_uri() . '/js/fadein.js', array('jquery'), '', true );
    wp_enqueue_script( 'hamburger', get_template_directory_uri() . '/js/hamburger.js', array('jquery'), '', true );
    wp_enqueue_script( 'navshow', get_template_directory_uri() . '/js/navshow.js', array('jquery'), '', true );

}
add_action( 'wp_enqueue_scripts', 'theme_js' );


// Enable custom menus
add_theme_support( 'menus' );

if that does not work then yeah upload your theme and i'll check it out.

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

quick edit paste again if you have not already

Ivan Tomicic
Ivan Tomicic
3,873 Points

Yeah, I tried first code you sent and there was an error or something, but this one is not helping again :/

Here is my theme file, I just started developing it, but I don't want to copy entire static html site to it before I resolve this issue, thank you so much!!!