Tabs not working correctly

[waynepatt58]

I have setup a couple of tabs, both have a shortcode that displays a map in each tab. The 1st tab displays the map but the second tab will not display the map. Hope you can shed some light on this and tell me what is going on, thanks.

[rad]

Hi @waynepatt58,

Thanks for reaching out.

The plugin renders the map through javascript and it renders based on the dimension of the container. Since it’s hidden, then no map is rendered. Usually, the fix is triggering the window resize event upon click, example

jQuery(window).trigger('resize');

hence the sample and complete code is this

jQuery( '.x-tabs > .x-tabs-list > ul > li > button' ).on('click', () => setTimeout ( () => jQuery(window).trigger('resize') , 1000 ) );

But the problem is, it’s not working on your map, but it does work on other elements that is dependent to container’s visibility and dimension. Your map is not dependent to window’s resize, hence it’s not gonna work.

I recommend contacting the plugin author on how to re-render the map based on click, they can enhance the above code. Perhaps they are using special API to make it work.

Thanks!

[waynepatt58]

thanks for that detailed description. Yes I will contact them but they are not as good as you guys when it comes to support.

[ruenel]

You are most welcome!

[waynepatt58]

I contacted the builder of the plugin who gave me the info below. I entered this code but still does not work, can you please check, thanks.

here is link to article. https://www.fla-shop.com/howto/wp-maps-tabs-responsive/

[christopher]

Hi @waynepatt58,

Unfortunately, we are not familiar with the inner coding details of the map in question. The code that you shared is basically the same thing that @rad shared. It does not give details of how to call the map. It just has a comment reading:

// add your map calling function here

So inside the code that @rad shared you need to call a function that initializes the map. You need to ask the plugin developer how to initialize map using Javascript and not a shortcode.

Please consider that this is something that the plugin developer should give the exact code which will work. the jQuery( '.x-tabs > .x-tabs-list > ul > li > button' ) section of given code to you by @rad is the only thing that the plugin developer needs to know how to select our theme tab.

Thank you for your understanding.