Bugs when embedding slider global block in tabs element

Hi,

I’ve been trying to create a portfolio style layout where each tab in the tabs element acts as a category and when clicked will display a global block specific to that category containing a slider element. Within each of the sliders screens there is another global block embedded which displays each ‘portfolio item’ .

My issue is that when switching between the category tabs the slider content doesn’t load properly - then when I click the next arrow AFTER a tab has been selected it loads but is squished to the left side. The issue seems to correct itself after the browser window has been resized.

Could you please let me know if there is a fix to this or if I should just abandon the process and try something new.

The link is:
https://davesdesign.com.au/portfolio-v2/

You can see by clicking on the second tab and also clicking the slider arrow on the second tab.

Cheers,
David

Hello David,

Thanks for writing in! I have checked your homepage and there is a JS error.

Uncaught ReferenceError: magnify is not defined
    at (index):650

The code in line 650 is this:

<script src="zooming.js" type="text/javascript"></script>
<script type="text/javascript">
          magnify("myimage", 2);
        </script>

This is coming from a 3rd-party script. You may need to contact the creators of this script and ask for further resolution. And if would also be helpful if you troubleshoot for the common issues that might also contribute to the issue. Kindly check this out:

Meanwhile, in your row settings, since you have disabled the global container, please set a width and maximum width.
szYCVxxzS_iPOAjJGOQacg

We would love to know if this has worked for you. Thank you.

Hi Ruenel,

Thanks for your response. The JS console errors are from an unrelated issue. I removed the script anyway to test and same result. By the way can you point me in the right direction to add a script tag to a single page instead of site wide? That src is only applicable to the home page but it appears on every page after I pasted it to the footer through functions.php :confused:

Anyway back to the issue…
I also tried adding a row width and max width, though not sure what the purpose of that is in relation to the issue.

I think it’s a bug in X when embedding a global block with a slider element in it into the tabs of a tab element. I tried again on another page and same result https://davesdesign.com.au/sample-page/

Are you able to confirm this on your end?

Cheers,
David

Hi David,

You can follow this about the script for home page https://wordpress.org/support/topic/add-custom-javascript-only-to-the-homepage-and-the-footer/, you’ll have to edit the code and apply yours.

As for the slider, it’s not a bug and not specific to global block. Any feature that requires dimension for rendering will fail if placed within hidden container, and the hidden tabs or accordions are the same. Hence, the slider will have zero width and height upon render within dimension less container. Please check this The Grid inside the tab cornerstone element. It’s not just on theme’s tab or accordion, it happens on visual composer tab too, and again, to any hidden container.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.