Hi Jennifer,
You can comment out (or delete) line 277 of maxmegamenu.js see if it’s causing the problem, but I don’t think it will make much difference as your custom JS is loaded after. At least you can figure out if the problem is due to event unbinding or somewhere in the custom JS.
I’m heading off for the weekend now, so this is just a quick reply so I don’t leave you waiting. I will be back online on Monday.
Regards,
Tom
Well, I’m flummoxed. The touchscreen part of my custom jQuery code had been working before and now zip. Commenting out line 277 did not help (as you suspected since my custom jQuery code is now loaded after the maxmegamenu.js file loads).
Did the latest update change anything to do with how the Max Mega Menu deals with touchscreen devices? Maybe I have a conflict now.
This is my code:
/* check if user device is touch screen or not */
function isTouchDevice() { // this code works
return (‘ontouchstart’ in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 || (window.DocumentTouch && document instanceof DocumentTouch));
};
/* swap main menu images — use click if a touchscreen, hover if not */
if (isTouchDevice()) {
jQuery(document).ready(function() {
jQuery(“.mega-menu-item-55 a.mega-menu-link”).click(function() {
jQuery(document).ready(function() {
jQuery(“#feature-text”).hide();
jQuery(“#feature-image”).attr(“src”, “http://jdaviswebdesign.com/education/wp-content/uploads/menu-image1.jpg”);
});
});
// repeat for each main menu item…
jQuery(“#headerwrap, #content”).click(function() { // return to original feature image
jQuery(document).ready(function() {
jQuery(“#feature-text”).show();
jQuery(“#feature-image”).attr(“src”, “http://jdaviswebdesign.com/education/wp-content/uploads/menu-image.jpg”);
});
});
});
} else {
// begin code for non-touchscreen devices using hover — this part works
}
Jennifer
Hi Jennifer,
Yes, the last update did change how MMM deals with touchscreen devices, but it should not impact your JS as it’s totally independent. You could install the WP Rollback plugin and roll back to the last version of MMM to check.
Anyway, instead of detecting clicks and hovers yourself, you can use the built in JS API. More info here: https://www.maxmegamenu.com/documentation/javascript-api/
Please try installing the plugin you see there. In short, you can forget about detecting touch and hover, and instead just do something like:
jQuery( document ).ready(function() {
jQuery('#mega-menu-item-55').on('open_panel', function() {
console.log('Sub menu for item 55 opened');
// do your background image changing here
});
jQuery('#mega-menu-item-54').on('open_panel', function() {
console.log('Sub menu for item 54 opened');
// do your background image changing here
});
});
Regards,
Tom
Tom-
Thank you!!! You are the best! That works beautifully. **happy dance**
Jennifer
Hi Jennifer,
Good to hear that’s working 🙂
If you have a spare couple of minutes please could you leave a review at the bottom of this page? https://wordpress.org/support/plugin/megamenu/reviews/
Many thanks,
Tom
