'When jquery defer, the menu js file gives an error and the menu does not work
Source of JS File: https://kargotakip.co/kargom-nerede/themes/trackco/js/customscript.js
Desktop and mobile menu not working. Click for picture
This js file is controlling the dropdown in my theme. Unfortunately, when I defer the jquery library, it gives this error. But if jquery doesn't defer, if the script loads normally, it works fine.
jQuery.fn.exists = function(callback) {
var args = [].slice.call(arguments, 1);
if (this.length) {
callback.call(this, args);
}
return this;
};
/*----------------------------------------------------
/* Make all anchor links smooth scrolling
/*--------------------------------------------------*/
jQuery(document).ready(function($) {
// scroll handler
var scrollToAnchor = function( id, event ) {
// grab the element to scroll to based on the name
var elem = $("a[name='"+ id +"']");
// if that didn't work, look for an element with our ID
if ( typeof( elem.offset() ) === "undefined" ) {
elem = $("#"+id);
}
// if the destination element exists
if ( typeof( elem.offset() ) !== "undefined" ) {
// cancel default event propagation
event.preventDefault();
// do the scroll
// also hide mobile menu
var headerHeight = $("#header.sticky-navigation").height() + 15; // Get fixed header height
if( headerHeight > 0 ){
var scroll_to = elem.offset().top-headerHeight;
} else {
var scroll_to = elem.offset().top;
}
$('html, body').removeClass('mobile-menu-active').animate({
scrollTop: scroll_to
}, 600, 'swing', function() { if (scroll_to > 46) window.location.hash = id; } );
}
};
// bind to click event
$("a").click(function( event ) {
// only do this if it's an anchor link
var href = $(this).attr("href");
var exclude = ['#tab-description', '#tab-additional_information', '#tab-reviews'];
if (exclude.includes(href)) {
return;
}
if ( href && href.match("#") && href !== '#' ) {
// scroll to the location
var parts = href.split('#'),
url = parts[0],
target = parts[1];
if ((!url || url == window.location.href.split('#')[0]) && target)
scrollToAnchor( target, event );
}
});
});
/*----------------------------------------------------
/* Responsive Navigation
/*--------------------------------------------------*/
if (mts_customscript.responsive && mts_customscript.nav_menu != 'none') {
jQuery(document).ready(function($){
$('#secondary-navigation').append('<div id="mobile-menu-overlay" />');
// merge if two menus exist
if (mts_customscript.nav_menu == 'both' && !$('.navigation.mobile-only').length) {
$('.navigation').not('.mobile-menu-wrapper').find('.menu').clone().appendTo('.mobile-menu-wrapper').hide();
}
$('nav').find('.header-social-icons').clone().appendTo('.mobile-menu-wrapper').hide();
$('nav').find('.mts-cart').clone().appendTo('.mobile-menu-wrapper').hide();
$('.toggle-mobile-menu').click(function(e) {
e.preventDefault();
e.stopPropagation();
$('body').toggleClass('mobile-menu-active');
if ( $('body').hasClass('mobile-menu-active') ) {
if ( $(document).height() > $(window).height() ) {
var scrollTop = ( $('html').scrollTop() ) ? $('html').scrollTop() : $('body').scrollTop();
$('html').addClass('noscroll').css( 'top', -scrollTop );
}
$('#mobile-menu-overlay').fadeIn();
} else {
var scrollTop = parseInt( $('html').css('top') );
$('html').removeClass('noscroll');
$('html,body').scrollTop( -scrollTop );
$('#mobile-menu-overlay').fadeOut();
}
});
**}).on('click', function(event) {
var $target = jQuery(event.target);
if ( ( $target.hasClass("fa") && $target.parent().hasClass("toggle-caret") ) || $target.hasClass("toggle-caret") ) {// allow clicking on menu toggles
return;
}
jQuery('body').removeClass('mobile-menu-active');
jQuery('html').removeClass('noscroll');
jQuery('#mobile-menu-overlay').fadeOut();
});**
}
/*----------------------------------------------------
/* Dropdown menu
/* ------------------------------------------------- */
jQuery(document).ready(function($) {
let $pullToggle = $('#pull');
function mtsDropdownMenu() {
if(!$pullToggle.is(':visible')) {
let timer;
let delay = 100;
$('.navigation li').hover(function (e) {
if (e.type === 'mouseenter') {
e.preventDefault();
let $this = $(this);
timer = setTimeout(function () {
$this.children('ul.sub-menu, ul.children').slideDown('fast');
}, delay);
}
else if (e.type === 'mouseleave') {
e.preventDefault();
$(this).children('ul.sub-menu, ul.children').hide(1);
clearTimeout(timer);
}
});
} else {
$('.navigation li').unbind('mouseenter mouseleave');
//$('.navigation li.active > ul.sub-menu, .navigation li.active > ul.children').show();
}
}
mtsDropdownMenu();
$(window).resize(function() {
mtsDropdownMenu();
});
});
/*---------------------------------------------------
/* Vertical menus toggles
/* -------------------------------------------------*/
jQuery(document).ready(function($) {
$('.widget_nav_menu, .navigation .menu').addClass('toggle-menu');
$('.toggle-menu ul.sub-menu, .toggle-menu ul.children').addClass('toggle-submenu');
$('.toggle-menu ul.sub-menu').parent().addClass('toggle-menu-item-parent');
$('.toggle-menu .toggle-menu-item-parent').append('<span class="toggle-caret"><i class="fa fa-plus"></i></span>');
$('.toggle-caret').click(function(e) {
e.preventDefault();
$(this).parent().toggleClass('active').children('.toggle-submenu').slideToggle('fast');
});
});
/*----------------------------------------------------
/* Social button scripts
/*---------------------------------------------------*/
jQuery(document).ready(function($){
(function(d, s) {
var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.src = url; js.id = id;
fjs.parentNode.insertBefore(js, fjs);
};
jQuery('span.facebookbtn, span.facebooksharebtn, .facebook_like').exists(function() {
load('//connect.facebook.net/en_US/all.js#xfbml=1&version=v2.8', 'fbjssdk');
});
jQuery('span.twitterbtn').exists(function() {
load('//platform.twitter.com/widgets.js', 'tweetjs');
});
jQuery('span.linkedinbtn').exists(function() {
load('//platform.linkedin.com/in.js', 'linkedinjs');
});
jQuery('span.pinbtn').exists(function() {
load('//assets.pinterest.com/js/pinit.js', 'pinterestjs');
});
jQuery('span.stumblebtn').exists(function() {
load('//platform.stumbleupon.com/1/widgets.js', 'stumbleuponjs');
});
}(document, 'script'));
});
/*----------------------------------------------------
/* Lazy load avatars
/*---------------------------------------------------*/
if ( mts_customscript['lazy_load_comments'] ) {
jQuery(document).ready(function($){
var lazyloadAvatar = function(){
$('.comment-author .avatar').each(function(){
var distanceToTop = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
var isVisible = distanceToTop - scroll < windowHeight;
if( isVisible ){
var hashedUrl = $(this).attr('data-src');
if ( hashedUrl ) {
$(this).attr('src',hashedUrl).removeClass('loading');
}
}
});
};
if ($('.comment-author .avatar').length > 0) {
$('.comment-author .avatar').each(function (i, el) {
$(el).attr('data-src', el.src).removeAttr('src').addClass('loading');
});
$(function () {
$(window).scroll(function () {
lazyloadAvatar();
});
});
//lazyloadAvatar();
}
});
}
/*
* Detect browser width for sticky navigation
*/
jQuery(document).ready(function ($) {
// check mobile width
function checkmobilesize() {
var wi = $(window).width();
if (wi <= 865) {
$header = $('#header');
if ($header.hasClass('sticky-navigation')) {
$header.removeClass('sticky-navigation');
}
if ($header.hasClass('sticky-navigation-active')) {
$header.removeClass('sticky-navigation-active');
}
$('#catcher').remove();
}
}
// check desktop width
function checkdesktopsize() {
var wi = $(window).width();
if (wi > 865) {
$header = $('#header');
if (!$header.hasClass('sticky-navigation')) {
$header.addClass('sticky-navigation');
}
}
}
if ('0' == mts_customscript.mobile_sticky) {
checkmobilesize();
}
$(window).resize(function ($) {
if ('0' == mts_customscript.mobile_sticky) {
checkmobilesize();
if ('1' == mts_customscript.desktop_sticky) {
checkdesktopsize();
}
}
});
});
I tried to load the jquery.min.js file with async but still no result. In Lighthouse, jquery.min.js wastes a lot of time and lowers my pagespeed score. For this reason, I want to install jquery.min.js as a defer, but the menu does not work.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
