Opening Isotope panel in modal view

We matched Isotope’s innate ability to manage content with the need to display more details in a modal view.

The popular Isotope framework for displaying content offers novel ways of arranging elements on a page. Specifically, in this post, we explain how we managed to display the content of table cell under the current table row.

Briefly stated, Isotope is an Ajax-based framework that benefits end-users and developers alike. On the end-user side, Isotope provides an improved visual experience, where content elements can be moved on the page or easily filtered, for example. Developers, on the other hand, use their Ajax knowledge to deliver highly interactive content in a relatively short time and with much-needed consistency. When developers adopt Isotope to their user interface arsenal, improvements in productivity and customer satisfaction are likely to follow.

The challenge

For one of our projects, the content page had its content placed in rows and columns. We wanted to make the current item appear below the current row in the grid, letting the item occupy the entire area available. While confident Isotope will offer a good starting point, we had to come up with a solution that will preserve the data while making changes to how the item is presented.

The solution: PHP side

We focused on two functions, wpr_get_articles() and wpr_display_article(), that are responsible for placing retrieved posts inside a <div> decorated with classes, and each post inside a <div> similar to typical article post, but having additional classes. The code will use the classes to make the content move on the screen while users examine the item.

The solution: jQuery side

Making a long story short, the jQuery code works its magic using the following steps:

1. Locates the item currently being selected;
2. Changes to click event of the link by switching the associated classes of the HTML element;
3. Prepares additional behavioral elements;
4. Computes the size of a modal view;
5. Opens the content in a modal view and places selected content inside newly generated HTML code;
6. Restores the page to its previous look after closing the modal view.

The solution: Demo

The short clip below shows how content shows up in a modal view:

Experience learned

In this project, in addition to reflecting on Isotopes qualities, we benefited from:

• Gaining a better understanding of how to harness Isotope and jQuery together;
• Keeping a fresh perspective on dealing with code while focusing on effective, clear, clean code.

Conclusion

When mastering popular and high-performance frameworks, it is always possible to amplify the behavior resulting from using them. In our example, we focused on making a popular framework deliver even better results by adding several lines of code.

Here’s the code if you want to reuse it for yourself: