Actually, what is the difficulty. There are two tabs on the page. Each of them has two

div 'and on which graphs are drawn via Dygraph .
When the page loads, the first tab displays the graphs as it should, when switching to 2, there are no graphs.

However, as soon as I make an increase or decrease in the size of the page - they appear (disappearing on the previous tab).

I realize that it seems like I need to do resize() selected div , but I don’t understand how.
The plugin itself on the tabs:

 (function($) { $(function() { $('ul.tabs__caption').each(function(i) { var storage = localStorage.getItem('tab' + i); if (storage) { $(this).find('li').removeClass('active').eq(storage).addClass('active') .closest('div.tabs').find('div.tabs__content').removeClass('active').eq(storage).addClass('active'); } }); $('ul.tabs__caption').on('click', 'li:not(.active)', function() { $(this) .addClass('active').siblings().removeClass('active') .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active'); var ulIndex = $('ul.tabs__caption').index($(this).parents('ul.tabs__caption')); localStorage.removeItem('tab' + ulIndex); localStorage.setItem('tab' + ulIndex, $(this).index()); }); }); })(jQuery);

https://jsfiddle.net/xpvt214o/268215/

    1 answer 1

    The problem is not in tabs. This usually happens because the divs in the hidden tab during the initialization of the graphs, as it were, do not calculate the dimensions. According to resize, a plugin that builds graphics reads them again. Try playing with the initialization of the charts, maybe there are some options in the options for this case. Or, for example, to set divs position different from static or explicit height and width in styles. You can also try when switching tabs manually trigger the “resize” event at the window, which in theory is listening to the plugin:

     //в вашем скрипте window.onTabToggle = function () { window.dispatchEvent(new Event('resize')); } //изменения в плагине $('ul.tabs__caption').on('click', 'li:not(.active)', function() { if (typeof onTabToggle === 'function') { onTabToggle(); } ....
    • I tried to change the position and width / height of the diva, but did not help. Do not tell me how you can make a trigger to change the taba? - Depressa
    • @Depressa, the plugin that you brought in the question, external or samopisny? - Mike Papou pm
    • external (minor cosmetic changes with the names of parameters, etc.) - Depressa
    • @Depressa, I mean, can you edit it in the project, or does it connect as external. If you can, add a callback directly to the click handler. For a good plugin, you should arrange it as a jquery plugin. But quickly, you can simply check the presence of a global function and call it. This is not a good practice, of course. Changed the code in the answer, try this. - Mike Papou
    • Everything, played with the alerts, and roughly realized at what point the resize goes and the function is called. Thank! - Depressa