Full width bug in first tab

  • Resolved sneike

    (@sneike)


    3 years, 5 months ago

    Hi there,

    I use a full width slideshow made with LayerSlider in various custom tabs. But if I place it in the first tab on the left, whenever I switch tab and go back to the first one, the slider is moved to the right. It only happens on the first tab.

    I already sent to Jon the page and the credential to access my website currently under maintenance.

    Any chance to fix this behaviour?
    Thanks for your help.
    Daniele

Viewing 9 replies - 1 through 9 (of 9 total)

  • 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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Full width bug in first tab’ is closed to new replies.