My Jquery not working in WordPress

Question

I am having issues with getting jQuery to work on my theme I am developing. None of the functions are working

Here is my enqueue'd scripts;

function spk_theme_js() {
 wp_enqueue_script('modernizer_js', get_template_directory_uri() . '/js/modernizr-2.6.2.min.js', '','', false);
 wp_enqueue_script( 'mainscript_js', get_template_directory_uri() . '/js/main.js', '', array ( 'jQuery' ), true);
}
add_action('wp_enqueue_scripts', 'spk_theme_js');

Here is my main.js code;

 jQuery(document).ready(function($) {
 
 /**************
 Navigation Bar
 ***************/
 'use strict';
 $('.fa-bars').click(function () {
  $("#myNav").css('height', '100%');
 });
 $('.closebtn').click(function () {
  $("#myNav").css('height', '0%');
 });
      
    });

When I click on the selected elements, nothing happens. Please assist.

I have updated the code and added the HTML.

<nav>
   <img src="img/SpakaDigital.png" id="logo">
   <!-- The overlay -->
   <div id="myNav" class="overlay">
     <!-- Button to close the overlay navigation -->
     <a href="javascript:void(0)" class="closebtn">&times;</a>
     <!-- Overlay content -->
     <div class="overlay-content">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="services.html">Services</a>
    <a href="blog.html">Blog</a>
    <a href="contact.html">Contact Us</a>
     </div>
   </div>
   <!-- Use any element to open/show the overlay navigation menu -->
   <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
  </nav>

Are you getting any errors? did you set console.log() or an alert() to find out if the function is being triggered when you click the item? — Laura Frese, Jan 24 '17 at 19:11
Are your classes added to html? Are you sure you linked the resources correctly? — Tim, Jan 24 '17 at 19:11
Is there an error in the browser console? When you debug this how exactly does it fail? Can you provide an actual example of the problem? — David, Jan 24 '17 at 19:12
jQuery gets loaded when WordPress loads automatically - you don't need to instantiate it again. Check the head of your document and see if it's in there. If it is, your problem is elsewhere. — serraosays, Jan 24 '17 at 19:27
@LauraFrese The only error I am getting is "jQuery is not defined:1". — Leroy, Jan 25 '17 at 05:31
@Leroy jQuery not defined is telling you what the problem is... jQuery is not defined. You need to define it. — Tim, Jan 25 '17 at 05:36
@Tim, I have resolved this issue. It is no longer there on the console (the error that is). But, when I click on '.fa-bars', my jQuery is still not workin. — Leroy, Jan 25 '17 at 05:46
@Tim I have added the HTML (of the static site). I am creating a nav menu bar here. — Leroy, Jan 25 '17 at 05:51

score 1 · Answer 1 · answered Jan 24 '17 at 19:20

1

I believe you may be missing the jquery library inclusion. When I tried, your code was throwing an error that "Jquery in not defined". So when, I included Jquery like below, the error was resolved.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Jan 24 '17 at 19:20

Piyush

1,142
9
16

I am coding for WordPress. I don't want people to see my file structure. – Leroy Jan 25 '17 at 05:35
1

You dont need to use file structure. Use teh CDN for jQuery.. like whats posted above. Also, your file structure will be included IN the wordpress theme's folders...So the best practice will be adding jquery in a lib folder in your themes root folder – Tim Jan 25 '17 at 05:37

score 0 · Answer 2 · edited May 23 '17 at 10:29

Your functions are working fine. Its your height thats giving you the hangup.

to test and make sure YOUR clicks are working, use

$(".fa-bars").click(function () {
    $("#myNav").css("background", "red");
    $("#myNav").css("height", "100%");
    });


    $('.closebtn').click(function () {
        $("#myNav").css('height', '0%');
        $("#myNav").css('background', 'green');

you will see that your colors will change, but your height stays the same and in fact does not change.

For the height to work, you need to have height defined in the parent elements because it does not have a height to reference. Usually, this can be fixed by define HTML height.

html{
    height: 100%;
    margin: 0;
    padding: 0;
}

Take a look at height: 100% not working

My Jquery not working in WordPress

2 Answers2