Question

I am using a jQuery plugin for certain content in a specific tab. The jQuery is http://masonry.desandro.com/ and the tabs are http://os.alfajango.com/easytabs/. When I try to load Masonry inside one of the tabs, it simply does not work, or displays incorrectly (everything stacks on each-other in top left). I’m unsure how to combat this problem, and so far have tried only running masonry after the tab has been clicked, after the tab content becomes visible, and other things of that nature.

Please point me in the right direction! thanks.

Answer 1

This problem seems to be related to the fact that I am using images with the masonry and easy tabs. To fix this, you must use Masonry’s imagesLoaded recomendation, and set up the code as so:

var $container = $('#masonry-container-name');

$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector : '.item-class-or-id'
    });

    $(document).ready(function(){
        $('#easytabs-container-name').easytabs();
    });
});