Closeable header section: Delay JS - flash on interaction

chrismcb6 · June 1

Hello.

On a site with a closeable header notice section that also uses WP Rocket with "Delay JS" enabled, the section is hidden on load; then appears when a user interacts with the page.

The entire page therefore moves down when a user tries to do something.

Is it possible for this to operate alternatively, without needing to allow the entire theme scripts.js file to execute on load?

You can see this at https://tinyurl.com/3cm677n7

Thank you.

Phil · June 1

Hi,

I have contacted our dev team, and I was informed that there is no other option except excluding the entire scripts.js file, unfortunately.

Best regards

chrismcb6 · June 1

OK, in that case, could an animation option be considered?

That way, the "flash" would appear more considered with a "slide down" rather than being abrupt.

Phil · June 1

Please try the following CSS code:

@keyframes slideInFromTop {

 0% {
  transform: translateY(-100%);
 }
 100% {
  transform: translateY(0);
 }
}

.mcb-section-w4k4plx{  
 animation: 1s ease-out 0s 1 slideInFromTop;
}

Best regards

chrismcb6 · June 1

Thanks, however the jump still appears on the page interaction as the .mfn-temporary-hidden class gets removed.

Is there an alternative solution the devs would consider as a theme improvement?

Phil · June 2

I will ask our dev team about that.

Best regards

Phil · June 5

Have you checked that with plugins disabled?

Does it behave in the same way?

Best regards

chrismcb6 · June 5

Sorry, which plugins?

This only happens when a caching system (WP Rocket) is in play, as it defers JS until user interaction.

Phil · June 5

I meant all other plugins, but forgot about that.

We have validated it with our dev team, and we have added a CSS code to your website:

At the moment, it is commented out, so please check if it behaves as you intended when this CSS is in use.

We cannot recommend anything else.

Best regards

chrismcb6 · June 5

Thanks - that work on load, however if the section has previously been dismissed, the JS then hides it on user interaction now.

It's therefore a flash the other way... they have already seen it and dismissed it, but will be shown it on every page until interacting, where the JS triggers and hides.

Phil · June 8

Unfortunately, as I consulted it with the dev team, there is nothing else we can recommend for that.

Best regards

chrismcb6 · June 8

Thanks - might I suggest some other inline script that could support page caching/deferring?

Or perhaps move this out of the main scripts.js file so that can be excluded?

That way, the script can be safely excluded from this process?

This is working for me, added as an HTML block on the page:

<script nowprocket>
/*
 * Show or remove BeTheme closeable sections early,
 * before deferred/delayed theme JS runs.
 *
 * Does not run inside BeBuilder, so the section remains visible
 * while editing even if the dismiss cookie exists.
 */
(function(){


	// Do nothing inside BeBuilder/admin UI.
	if (document.body && document.body.classList.contains('mfn-ui')) {
		return;
	}


	// Find any BeTheme closeable sections already present in the HTML.
	document.querySelectorAll('.section.closeable-active').forEach(function(s){


		// BeTheme stores each section's ID in data-uid.
		var uid = s.dataset.uid,
			c = document.cookie;


		// Skip anything without a UID.
		if (!uid) return;


		// If BeTheme's dismiss cookie exists for this section, remove it.
		if (c.indexOf('mfn_closed_section_' + uid + '=') > -1) {
			s.remove();
		}


		// Otherwise, show it immediately by removing BeTheme's temporary hiding class.
		else {
			s.classList.remove('mfn-temporary-hidden');
		}
	});
})();
</script>

Phil · June 8

It is great to see that you managed to find a solution that works perfectly for your specific setup, and feel free to keep it this way if you are happy with the results.

Regarding moving this function out of the scripts.js file, we do not have plans to do that. If we were to extract this particular feature, we would likely face thousands of similar requests for other functions as well. This would eventually force us to split our single, optimized script file into dozens of smaller ones, which is not an optimal solution in terms of overall theme performance and maintenance.

Thank you for your understanding and for sharing your approach with the community!

Best regards

chrismcb6 · June 8

No problem. Happy to publish it here if it helps others.

Closeable header section: Delay JS - flash on interaction

Comments

This website uses cookies