Problem with tabgroup and show post snippets shortcodes

[maxellmarcus]

Hello,

In our website the courses are divided by category. I want include each category into one tab, but as in the example, all the categories except the first don’t working.

http://www.scuoladipaloalto.ch/department/supply-chain-copy/

Thanks in advance

[Veena]

Can you pls share a temp login to your site as a private message?

[maxellmarcus]

This reply has been marked as private.

[maxellmarcus]

This reply has been marked as private.

[Veena]

Pls provide admin rights .

[maxellmarcus]

This reply has been marked as private.

[Veena]

We will get back to you shortly .

[maxellmarcus]

Is there a conflict between the shortcodes?

[Raghavendra]

The shortcodes are processed fine and in fact after opening a tab, if you resize the browser, you can see that the post snippets line up correctly in any tab. The issue is due to Javascript not being applied to a tab when it is hidden from view using display: none CSS. Since it is effectively out of DOM, the JS does not run on the contents of the tab which is not shown.

This problem would remain with any other tab implementation. I would suggest you go for a list instead of tab. Have you tried this with the toggle shortcode and see if that works for you?

[maxellmarcus]

The toggle shortcode gives the same problem. I will choose a simple list for the courses.
Anyway, thank you!

[maxellmarcus]

I think this issue gives problems for theme usability. I would suggest you to find a solution for this because is a pity for the functionality of the theme.

[Raghavendra]

Fixing this complicates the design of the tab and the theme. On each tab click we would need to trigger a global change event that should make the whole JS file to be executed. This is not just an issue of post snippets and tab but also that of any other content that relies on JS like the stats, portfolio etc. that potentially can be inserted into a tab or accordion.

I logged in and added this piece of code at line number 494 of js/main.js file –

from

$("ul.tabs").tabs(".pane");

to

$("ul.tabs").tabs(".pane", {
        onClick: function(event, tabIndex) {
            var html_content = $('.js-isotope');
            // layout Isotope again after all images have loaded
            html_content.imagesLoaded(function () {
                html_content.isotope('layout');
            });
        }
    });

and this test page on your site look good now –

http://www.scuoladipaloalto.ch/test-page/

[maxellmarcus]

Thank you very much. Now works fine and the courses displaying is more attractive then a simple list!

[Author]

Posts