First, let me explain that I don’t know JavaScript. I am working on a site that has a separate phpBB forum that someone else added. This person wanted to use a different type nav than the rest of the site. The code seems to come from css menu maker. The errrors that I see in Inspect Element are as follows:
Uncaught ReferenceError: jQuery is not defined - script.js:61
Uncaught TypeError: Cannot read property ‘split’ of undefined - forum_fn.js:531
There are a couple of files that are dealing with the css menu - menu.css and script.js. I have commented out all code in the js file and the css file. The header.php file is calling the script.js file so I commented out that as well. The bottom line is I want the forums to have the same nav menu as the rest of the site so that the errors that are being detected can go away or the errors in the js code corrected. Of course the nav looks different than the rest of the site, which bothers me but not the owners of the site.
This is the script.js code -
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery); // this is the line that is throwing the error
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
});
})(jQuery);
The other error seems to come from this code -
// Fix tabs structure
tabs.not('.tab').each(function() {
var tab = $(this),
className = tab.attr('class').split(' '), //this is the line throwing the error
i;
tab.attr('class', 'tab');
for (i=0; i<className.length; i++) {
if (className[i].substr(0, 5) == 'icon-') {
tab.addClass(className[i].substr(5));
}
}
}).children(':first-child').addClass('nav-link');
This is the staging site - http://staging.sacramentgame.com/forum/
This is the live site - http://sacramentgame.com/forum/
Could someone please help me either correct the code or get rid of it and have the nav be the one pulled from the site itself instead of having a separate one for the forum.
The forums changed here since I last visited so I hope I am displaying code correctly.