Perfect combination of bootstrap tab and masonry plug-in _javascript tips

Bootstrap is one of the most popular front-end frameworks. Using bootstrap in your project, you can quickly implement responsive web pages.

If you try to use the tab component of one of the many JavaScript components provided by masonry and bootstrap, you will find many annoying behaviors.

I've met, and this article focuses on what this problem is and how you are going to solve it.

Bootstrap's tabs

The Bootstrap tab component includes two key points: Tab navigation elements and some content panels. When the page loads, the first panel applies the. Active class. Make this panel visible by default. This class is used to toggle the visibility of the panel through the use of JavaScript, which triggers events that are triggered by tab navigation: If the panel now owns. Active class it is visible, otherwise the panel is hidden.

If you have some Web content that's best in a separate block rather than in one place, that tab component might be handy.

Why the Maronry?

In some cases, the content within each panel is appropriate to be displayed in the response-style grid layout. For example, a range of goods, services, and folder items are content types that can be displayed in a grid format.

However, if the grid's lattice is not the same height, it will happen as you see below.

The two lines are stretched out by some large spacing to make the layout look ugly.

This is the time for masonry to solve the problem. Add some masonry functionality to this messy layout, and then your layout will be dynamically adapted to the actual size of the screen, eliminating all the blank space between the damaged layouts.

Set up a demo page

Making a sample page to show how to integrate bootstrap tabs and masonry is not as simple as expected.

The demo case for this article is based on the starting template available on the bootstrap web site

Each grid item in the tab panel is built with bootstrap grid systems and thumbnail components. Here is a snippet of code to explain its structure:

<div class= "col-sm-6 col-md-4" >
<div class= "thumbnail" >

<div class=" caption ">
 
 

The code above creates a grid of three columns on a large screen and two columns on a small screen. If you need to review the bootstrap grid system, Syed Fazle Rahman's understanding of the bootstrap grid system is a good article.

The tab component in the sample page has the following HTML structure:

<div role= "TabPanel" > <!--Nav tabs--> <ul class= "Nav nav-tabs" role= "Tablist" > <li role= "Presentat Ion "class=" active "> <a href=" #panel-1 "aria-controls=" panel-1 "role=" tab "data-toggle=" tab ">panel > </li> <li role= "Presentation" > <a href= "#panel-2" aria-controls= "Panel-2" role= "tab" data-toggle= " Tab ">panel 2</a> </li> <li role=" Presentation "> <a href=" #panel-3 "aria-controls=" panel-3 " role= "tab" data-toggle= "tab" >panel 3</a> </li> <li role= "Presentation" > <a href= "#panel-4" aria-controls= "panel-4" role= "tab" data-toggle= "tab" >panel 4</a> </li> </ul> <!--tab Panels- > <div class= "tab-content" > <div role= "TabPanel" class= "Tab-pane Active" id= "panel-1" > <div class= " Row Masonry-container "> <div class=" col-md-4 col-sm-6 Item "> <!--Thumbnail goes here--> </div> < Div class= "col-md-4 col-sm-6 Item" > <!--ThumbnailGoes here--> </div> <div class= "col-md-4 col-sm-6 Item" > <!--Thumbnail goes here--> </div>.
.. </div><!--End Masonry-container--> </div><!--end panel-1--> <div role= "TabPanel" Tab-pane "id=" Panel-2 "> <!--Same as what goes inside Panel-1--> </div><!--end panel-2--> ... </ div><!--End tab-content--> </div><!--end TabPanel-->

Here are some things to note about the code snippet above:

The HTML annotation indicates the key part of the tab: the Navigation section of the NAV Tabs logo tab, NAV panels marks the content panel.
Tabs link to the content panel with the same value as the corresponding ID attribute through the value of their href attribute. For example, a link with the href= "#panel-1" opens a ID=PANEL-1 content panel.

Each anchor tag in the navigation section contains data-toggle= tab. This tag makes the tab component work without having to write any additional JavaScript.
The target element of the masonry needs to have a. Masonry-container class, which applies to the wrapper div element that contains all the grid items, and to the. Item class for each individual grid item.

To see the full power of the masonry library, make sure that the grid project has a different height. For example, delete a picture of an item, shorten the paragraph for another item, and so on.

Complete code, see the code for the sample in Codepen.

Add Masonry Library

You can download masonry.pkgd.min.js by clicking the "Download" button on the masonry website.

To avoid layout problems, the authors of the library recommend that masonry be used with the imagesloaded plug-in.

Masonry does not need jQuery. But because Bootstrap's JavaScript component is already using jquery to initialize masonry in jquery I will make my own life better.

This is the code snippet we need to initialize the masonry with jquery and imagesloaded.

var $container = $ ('. Masonry-container ');
$container. imagesloaded (function () {
$container. Masonry {
columnWidth: '. Item ',
itemselector: '. Item '
}); 
});

The above code stores the div that wraps all the grid items in a variable called $container.

Next, the masonry is initialized with two recommended options on the $container. The ColumnWidth option indicates the width of one column in a horizontal grid. Here you set the width of a single grid item by using the class name of a single grid item. The Itemselector option indicates which child element is used as a project element. Here, also set as a single grid item.

Now it's time to test the code.

Oh! What happened to the hidden panel?

On a Web page that doesn't use the Bootstrap tab, the code above is like magic. However, in this case, you will soon find an interesting behavior to appear.

First, it looks good because the grid in the tab panel shown by default is displayed correctly:

However, if you click the tab navigation link to display the contents of the hidden panel, the following will occur:

Looking at the source, masonry has been triggered as expected, but the location of each item is not correctly calculated: The grid items are stacked like a pack of cards.

That's not all. Resizing the browser window will make these grid items position themselves correctly.

Let's solve this layout error

Since this unexpected layout error becomes more pronounced after clicking on the navigation links of the tabs, let's look more closely at the events triggered by the Bootstrap tab.

The list of events is very short. As follows.

Show.bs.tab triggers the tab display, but before the New tab page is displayed
Shown.bs.tab trigger tab display, after the tab page is displayed
Hide.bs.tab will be triggered when a new tab is displayed (so the previous displayed tab will be hidden)
Hidden.bs.tab is triggered after a new tab is displayed (so the previous displayed tab is hidden)

Because the grid layout is messed up after the label page has been displayed, so we go to find the Shown.bs.tab event. We put the code here below our original code:

$ (' a[data-toggle=tab] '). each (function () {
var $this = $ (this);
$this. On (' Shown.bs.tab ', function () {
$container. imagesloaded (function () {
$container. Masonry ({
ColumnWidth: '. Item ',
itemselector: '. Item '
}; 
});

What's going on in the code above:

The jQuery. each () function loops through each tab navigation link to listen for shown.bs.tab events. When this event is triggered, the corresponding panel becomes visible, and the masonry is reinitialized after all the pictures have been loaded.

Let's test the code.

If you follow the article, start your sample page directly in your browser, or try the following Codepen example to see the results.

You may also want to look at the complete sample page to test the response layout effect.

Click on the tab navigation link to note how the grid items fit evenly in each panel. Changing the size of the browser will cause the grid items to reposition themselves correctly and have a nice animated effect.

That's it, mission accomplished!

Conclusion

In this article I've shown how to integrate bootstrap tabs and masonry JavaScript libraries.

Both scripts are easy to use and very powerful. However, putting the two of them together you will face some layout vulnerabilities that affect hidden tabs. As shown above, the trick is to reinitialize the masonry library after each panel becomes visible.