Hi Daniele,
I see the problem. The LayerSlider is using JS to ensure that it is full-width. We need to trigger a resize event so it knows to update itself to full-width again when a tab is clicked. A quick way to do that is as follows:
Array.from(document.querySelectorAll('.tabs.wc-tabs > li > a')).map(
element => element.addEventListener('click', () => window.dispatchEvent(new Event('resize'))));
Let me know if that works,
Jon
Thread Starter
sneike
(@sneike)
Hey Jon, thank you so much for your tip, any insight about why it is happening only in the first tab?
I thought about something like this to fix it. Would you please be so kind to explain where should I try to use that code? Should I just paste it as it is in my function.php file? Or somewhere else?
Thank you, and sorry for bothering you.
Daniele
Hey Daniele,
I’m sorry, I wasn’t very clear. That’s a JavaScript snippet. I believe you had used the Simple CSS & JS plugin for the previous ticket about linking to tabs. You can do the same thing with this snippet. And it’s no bother 🙂
I’m not really sure why it’s only the first tab. That first tab is the regular WooCommerce product description tab, so it may be treated differently by your theme.
Let me know if that helps,
Jon
Thread Starter
sneike
(@sneike)
Yes, I’m using that plugin to enable the tab linking feature.
I tried to paste this code in the same snippet I had created already for the tab links, and also in a new JS snippet, but it doesn’t seem to work. Not sure if it’s because I’m implementing it wrong, or because of the code.
Actually I’m not using at all the default description woocommerce tab by leaving it empty, and I replaced it with a custom tab called the same. (that way I can choose the position of the description slider.)
Thanks for your help.
Daniele
Hi Daniele,
I’m seeing the following snippet added to that plugin:
var resizeEvent = window.document.createEvent('UIEvents');
resizeEvent.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(resizeEvent);
That does dispatch a resize event, but only once. The snippet I sent you adds an event listener to the tabs, so that each time you click a tab the resize event is fired.
Let me know if that helps,
Jon
Thread Starter
sneike
(@sneike)
Yes, I’m making various attempts, and I tried that code too. But they both don’t work.
If you check back now, you’ll see your code, but the bug is not fixed.
Thanks for checking. It’s really appreciated.
Daniele
Hi @sneike,
Try this instead:
window.onload = () => Array.from(document.querySelectorAll('.tabs.wc-tabs > li > a')).map(
element => element.addEventListener('click', () => window.dispatchEvent(new Event('resize'))));
The plugin just drops it in a script tag in the <head> element, so it’s running before the rest of the page loads.
Let me know if that works,
Jon
Thread Starter
sneike
(@sneike)
It’s fantastic! It seems to work now.
Thanks a lot for your support!
Daniele
Hi @sneike,
You’re very welcome! Glad it’s working.
Thanks,
Jon
