jQuery Masonry doesn’t work with Bootstrap Hidden Tab

Ref: jQuery Masonry
I think many of you face issue with bootstrap hidden. After a hidden tab is made visible many things doesn’t work for the new visible content as it’s container was hidden, jquery or other js library fails to get various property, example: height, width etc and even some common issues like scrollbar, masonry etc script doesn’t work. So I have a solution for this.

Here is the common declaration about a bootstrap based tab.

[code language=”html”]
<div class="tabbable"> <!– Only required for left/right tabs –>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I’m in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I’m in Section 2.</p>
</div>
</div>
</div>
[/code]

The above code will make a tabber based on BT. So now suppose in tab content pane we added Jquery Masonry. On first load the first tab will be visible and it’s masonry will work properly and 2nd tab will not as it should be actually but you will be unhappy about it and tear … 🙂 So here I am trying to how we can make this possible to work properly.

Let For adding masonry the html code for tab here.

[code language=”html”]
<div class="tabbable"> <!– Only required for left/right tabs –>
<ul class="nav nav-tabs">
<li class="active"><a masonid="mymasontabcon1" href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a masonid="mymasontabcon1" href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div id="mymasontabcon1">
<div class="itembox">hi there</div>
<div class="itembox">hi there</div>
<div class="itembox">hi there</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div id="mymasontabcon1">
<div class="itembox">hi there</div>
<div class="itembox">hi there</div>
<div class="itembox">hi there</div>
</div>

</div>
</div>
</div>
[/code]

Check in the above code for each anchor in li(tab) I added something like
masonid=”mymasontabcon1″ here attribute masonid is the div id of the div which we want to apply masonry. So suppose on dom ready we added masonry once.

Here we I did is calling the reload method of jquery masonry script but that need to be done after the tab’s container is shown. Otherwise we will not get proper output. I did this for each toggle of any tab, same thing is coded in the tab’s plugin included with BT.

[code language=”javascript”]
jQuery(document).ready(function(){
//this will certain happen when tab show method is done, that means we reload the masonry after the tab container is shown.
jQuery(‘body’).on(‘click.tab.data-api’, ‘[data-toggle="tab"], [data-toggle="pill"]’, function (e) {
e.preventDefault();
var mytarget = jQuery(this).attr(‘cbmasonid’);
//it is taken that already masonry is added in each tab.
jQuery("#"+mytarget).masonry(‘reload’ ); //here we call the reload method.
})
});
[/code]