The Return of the Hideous Content Flash

[John Ennals]

A few years ago, our much-missed friend Norman posted a fix for the "Hideous Content Flash" that occurs when the Mega Menu opens briefly whenever the mouse passes over it on the way to somewhere else on the screen. The original post is here: https://community.sellerdeck.com/for...passes-over-it

Unfortunately the Hideous Content Flash is alive and well in the Swift design, and Norman's fix doesn't work as it stands because it creates coding errors.

I'd very much like to know how to modify Norman's fix to work with Swift. Can anybody point me in the right direction please?

Thank you,
John

[Buzby]

Something I too would like to know.

I used it before, and if I remember it was just a case of putting a slight delay on it, so it would only trigger when you stopped the mouse.

I must admit it makes me cringe when I navigate my own site and is on my list to do. Unfortunately the last few months Sellerdeck have created more pressing things to deal with.

sellerdeck, Is there a quick change you could advise of?

[graphicz]

This line is missing from the Swift V2 Mega Menu Layout:

       echo ' onclick="mmClick(event, <actinic:variable name="ListIndex" selectable="false" />);" onmouseover="mmOpen(<actinic:variable name="ListIndex" selectable="false" />);" onmouseout="mmCloseTime();"';        }

This is the line changed by Norman's js file:

// replace Mega Menu top-level: onmouseover="mmOpen(<actinic:variable name="ListIndex" selectable="false" />);" onmouseout="mmCloseTime();" with hoverintent

Let me see if I can figure it out...

[graphicz]

The unminified webslidemenu.js is this:

document.addEventListener("touchstart", function () {}, false);
$(function () {
$(".wsdownmenu").append($('<a class="wsdownmenu-animated-arrow"><span></span></a>'));
$(".wsdownmenu").append($('<div class="wsdownmenu-text">Navigation</div>'));
$(".wsdownmenu-list > li").has(".wsdownmenu-submenu").prepend('<span class="wsdownmenu-click"><i class="wsdownmenu-arrow fa fa-angle-down"></i></span>');
$(".wsdownmenu-submenu > li").has("ul").prepend('<span class="wsdownmenu-click02"><i class="wsdownmenu-arrow fa fa-angle-down"></i></span>');
$(".wsdownmenu-submenu-sub > li").has("ul").prepend('<span class="wsdownmenu-click02"><i class="wsdownmenu-arrow fa fa-angle-down"></i></span>');
$(".wsdownmenu-submenu-sub-sub > li").has("ul").prepend('<span class="wsdownmenu-click02"><i class="wsdownmenu-arrow fa fa-angle-down"></i></span>');
$(".wsdownmenu-list li").has(".megamenu").prepend('<span class="wsdownmenu-click"><i class="wsdownmenu-arrow fa fa-angle-down"></i></span>');
$(".wsdownmenu-animated-arrow").click(function () {
$(".wsdownmenu-list").slideToggle(200);
$(this).toggleClass("wsdownmenu-lines");
});
$(".wsdownmenu-click").click(function () {
$(this).toggleClass("wsdownmenuarrow-rotate").parent().siblings().children().removeClass("wsdownmenuarrow-rotate");
$(".wsdownmenu-submenu, .megamenu").not($(this).siblings(".wsdownmenu-submenu, .megamenu")).slideUp(200);
$(this).siblings(".wsdownmenu-submenu").slideToggle(200);
$(this).siblings(".megamenu").slideToggle(200);
});
$(".wsdownmenu-click02").click(function () {
$(this).toggleClass("wsdownmenuarrow-rotate").parent().siblings().children().removeClass("wsdownmenuarrow-rotate");
$(this).siblings(".wsdownmenu-submenu").slideToggle(200);
$(this).siblings(".wsdownmenu-submenu-sub").slideToggle(200);
$(this).siblings(".wsdownmenu-submenu-sub-sub").slideToggle(200);
});
window.onresize = function (event) {
/*console.log('window resize');*/ if ($(window).width() > 767) {
$(".wsdownmenu-submenu").removeAttr("style");
$(".wsdownmenu-list").removeAttr("style");
}
};
});

Got to work out where to apply hoveriintent??? https://briancherne.github.io/jquery-hoverIntent/

[Buzby]

Courtesy of Chat GPT (untested as I'm not near a Sellerdeck PC)


In order to achieve the behavior you described, we'll need to create a brief delay after the mouse stops moving before showing the dropdown menu. We can accomplish this with a setTimeout function, which will start a timer when the mouse enters the menu item. If the mouse leaves the menu item before the timer completes, we'll cancel the timer. If the timer completes, we'll show the dropdown menu.

This code introduces a delay of 300 milliseconds (0.3 seconds) after the mouse stops moving before the menu drops down. If you want the delay to be shorter or longer, you can adjust the number in the setTimeout function. Note that the time is in milliseconds, so 1000 milliseconds is 1 second.

document.addEventListener("touchstart", function () {}, false);

$(function () {
let timer;

$(".wsdownmenu").append($('<a class="wsdownmenu-animated-arrow"><span></span></a>'));
$(".wsdownmenu").append($('<div class="wsdownmenu-text">Navigation</div>'));

$(".wsdownmenu-list > li").has(".wsdownmenu-submenu").prepend('<span class="wsdownmenu-click"><i class="wsdownmenu-arrow fa fa-angle-down"></i></span>');
$(".wsdownmenu-submenu > li").has("ul").prepend('<span class="wsdownmenu-click02"><i class="wsdownmenu-arrow fa fa-angle-down"></i></span>');
$(".wsdownmenu-submenu-sub > li").has("ul").prepend('<span class="wsdownmenu-click02"><i class="wsdownmenu-arrow fa fa-angle-down"></i></span>');
$(".wsdownmenu-submenu-sub-sub > li").has("ul").prepend('<span class="wsdownmenu-click02"><i class="wsdownmenu-arrow fa fa-angle-down"></i></span>');
$(".wsdownmenu-list li").has(".megamenu").prepend('<span class="wsdownmenu-click"><i class="wsdownmenu-arrow fa fa-angle-down"></i></span>');

$(".wsdownmenu-animated-arrow").click(function () {
$(".wsdownmenu-list").slideToggle(200);
$(this).toggleClass("wsdownmenu-lines");
});

$(".wsdownmenu-click").hover(function () {
clearTimeout(timer);
timer = setTimeout(() => {
$(this).toggleClass("wsdownmenuarrow-rotate").parent().siblings().children().removeClass("wsdownmenuarrow-rotate");
$(".wsdownmenu-submenu, .megamenu").not($(this).siblings(".wsdownmenu-submenu, .megamenu")).slideUp(200);
$(this).siblings(".wsdownmenu-submenu").slideToggle(200);
$(this).siblings(".megamenu").slideToggle(200);
}, 300);
}, function () {
clearTimeout(timer);
});

$(".wsdownmenu-click02").hover(function () {
clearTimeout(timer);
timer = setTimeout(() => {
$(this).toggleClass("wsdownmenuarrow-rotate").parent().siblings().children().removeClass("wsdownmenuarrow-rotate");
$(this).siblings(".wsdownmenu-submenu").slideToggle(200);
$(this).siblings(".wsdownmenu-submenu-sub").slideToggle(200);
$(this).siblings(".wsdownmenu-submenu-sub-sub").slideToggle(200);
}, 300);
}, function () {
clearTimeout(timer);
});

window.onresize = function (event) {
if ($(window).width() > 767) {
$(".wsdownmenu-submenu").removeAttr("style");
$(".wsdownmenu-list").removeAttr("style");
}
};
});

[John Ennals]

As far as I can see, Swift uses the proprietary Webslide menu system which is completely different from the old mega menu, so I can't see how to apply Norman's fix to it either. (I guess this also means even more redundant CSS now being loaded to slow things down.)

I've had a look at the demos on webslidemenu.com, and they seem to suffer from HCF too. So do some major retailers' sites, e.g. John Lewis and Wickes, so maybe it's not as big a problem as I thought. However, other retailers' sites, e.g. Next and Currys, are flicker-free.

Very frustrating, as are several aspects of Swift. To be honest, the main things I like about Swift are the cart, checkout and receipt. If I could just graft them onto my current Smart site I'd be perfectly happy.

John

[graphicz]

Annoyingly webslidemenu is for mobile. There is some megamenu stuff in actinicextras but I suspect this is redundant. If you run a test site with no webslidemenu and no actinicextras the mega menu still displays correctly on desktop.

More thinking required!

[John Ennals]

There's this in the "Javascript Footer Functions Swift" layout around line 200, which looks relevant:

(function($) {
jQuery(document).ready(function(){
jQuery("nav .wsdownmenu-list >li").hover(function(){
if (jQuery(this).find("div").length) {
jQuery("#menu-overlay").addClass("menu-activated");
}
}, function(){
jQuery("#menu-overlay").removeClass("menu-activated");
});

Not sure if that's of any use - it's too hot to think!

[graphicz]

"Javascript Footer Functions Swift" layout around line 200,

That does the overlay when the menu is moused over.

Try adding this to the <head>

<style>
div[id^="tc"] {
  transition-duration: .3s;
  transition-delay: .3s;
}
</style>

You can make the time longer if you wish.

Example at: https://www.newebsite.co.uk/indexMM.html - Necklaces and Earings

Refinements most welcome!

[John Ennals]

Thank you Jonathan, that is a definite improvement. I've also applied this styling to <div id="menu-overlay"> a bit further down the Outer Layout, which stops the overlay "flashing" as well. I hope this doesn't have any unforeseen side effects!

John

[graphicz]

That cracked it John - well done! Thank you.

 <style>
div[id^="tc"], #menu-overlay {
transition-duration: .3s;
transition-delay: .3s;}
</style>

Example site at:

https://www.newebsite.co.uk/sw/index.html