Making a jQuery Isotope layout initialize inside a Bootstrap Tab

Question

I have a bootstrap tab control with 4 tabs. My Isotope code is inside the 3rd tab. But when I navigate to that tab, the layout is not engaged (All the images are on their own li

Answer 1

The answer by Karine is great but it might not work in recent versions because the method "reLayout" has been renamed to "layout".

So instead of

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('.grid').isotope('reLayout');
});

please use

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('.grid').isotope('layout');
});

Answer 2

You can use the event shown.bs.tab :

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $container.isotope('layout');
});

This code will trigger layout for all tabs, so you can detect the tab with e.target, if e.target == your tab link to your isotope grid, then trigger layout. Hope it makes sense...

http://jsfiddle.net/Vc6Vk/1/