How do i integrate custom jquery in wordpress?
-
I want to integrate custom jquery for my navigation bar and it fails to look? Kindly help me look into it and let me know what i am getting wrong? In my console, i got the below error message
Uncaught ReferenceError: jQuery is not defined
<anonymous> http://localhost/earnds.com/wp-content/themes/earn-ds/assets/js/navigation.js?ver=1.0.0:50Also, here is my full custom jquery
/**
* File navigation.js.
*
* Handles toggling the navigation menu for small screens and enables TAB key
* navigation support for dropdown menus.
*/
(function($) {
// search-box open close js code
let navbar = document.querySelector(".navbar");
let searchBox = document.querySelector(".search-box .bx-search");
// let searchBoxCancel = document.querySelector(".search-box .bx-x");
searchBox.addEventListener("click", ()=>{
navbar.classList.toggle("showInput");
if(navbar.classList.contains("showInput")){
searchBox.classList.replace("bx-search" ,"bx-x");
}else {
searchBox.classList.replace("bx-x" ,"bx-search");
}
});
// sidebar open close js code
let navLinks = document.querySelector(".nav-links");
let menuOpenBtn = document.querySelector(".navbar .bx-menu");
let menuCloseBtn = document.querySelector(".nav-links .bx-x");
menuOpenBtn.onclick = function() {
navLinks.style.left = "0";
}
menuCloseBtn.onclick = function() {
navLinks.style.left = "-100%";
}
// sidebar submenu open close js code
let htmlcssArrow = document.querySelector(".htmlcss-arrow");
htmlcssArrow.onclick = function() {
navLinks.classList.toggle("show1");
}
let moreArrow = document.querySelector(".more-arrow");
moreArrow.onclick = function() {
navLinks.classList.toggle("show2");
}
let jsArrow = document.querySelector(".js-arrow");
jsArrow.onclick = function() {
navLinks.classList.toggle("show3");
}
})( jQuery );This is how i enqueue.
wp_enqueue_script( 'earn-ds-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), true );How should i resolve the problem for it to load?
Viewing 13 replies - 1 through 13 (of 13 total)
-
I was able to little work on the jquery. The issue now is that the jquery is not looking display none and block style on the ul ul. Kindly help me look at the jquery in my wordpress code and let me know what i have done wrong? I am equally seeking error message in my browser console
Here is how i integrated the jquery
wp_enqueue_script( 'kaculat-jquery-min', get_template_directory_uri() . '/assets/js/jquery.min.js', array('jquery'), '2.1.3', true );
(function( $ ) {
"use strict";
// javascript code here. i.e.: $(document).ready( function(){} );
// on document ready
$(document).ready(function () {
// show/hide the mobile menu based on class added to container
$('.menu-icon').click(function () {
$(this).parent().toggleClass('is-tapped');
$('#hamburger').toggleClass('open');
});
// handle touch device events on drop down, first tap adds class, second navigates
$('.touch .sitenavigation li.nav-dropdown > a').on('touchend',
function (e) {
if ($('.menu-icon').is(':hidden')) {
var parent = $(this).parent();
$(this).find('.clicked').removeClass('clicked');
if (parent.hasClass('clicked')) {
window.location.href = $(this).attr('href');
} else {
$(this).addClass('linkclicked');
// close other open menus at this level
$(this).parent().parent().find('.clicked').removeClass('clicked');
parent.addClass('clicked');
e.preventDefault();
}
}
});
// handle the expansion of mobile menu drop down nesting
$('.sitenavigation li.nav-dropdown').click(
function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
if ($('.menu-icon').is(':visible')) {
$(this).find('> ul').toggle();
$(this).toggleClass('expanded');
}
});
// prevent links for propagating click/tap events that may trigger hiding/unhiding
$('.sitenavigation a.nav-dropdown, .sitenavigation li.nav-dropdown a').click(
function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
});
// javascript fade in and out of dropdown menu
$('.no-touch .sitenavigation li').hover(
function () {
if (!$('.menu-icon').is(':visible')) {
$(this).find('> ul').fadeIn(100);
}
},
function () {
if (!$('.menu-icon').is(':visible')) {
$(this).find('> ul').fadeOut(100);
}
});
});
//# sourceURL=pen.js
})(jQuery);
Viewing 13 replies - 1 through 13 (of 13 total)
You must be logged in to reply to this topic.