Schedule a Free Consultation

Opening Isotope Panel in Modal View

Read Article

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:

Opening Isotope Panel in Modal View - WPRiders Article

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.

Navigate to

You Might Also Enjoy These Digital Marketing Articles:

How to Launch a Job Website Using WordPress [Complete Guide] - WPRiders Article
How to Launch a Job Website Using WordPress [Complete Guide]
We’ve All Been There… Even You I don’t know about you, but I was really excited about my first job. It was the end of my freshman year in college, and I wanted to find summer work. That’s why I started job hunting early. And if there’s one thing I learned, it’s that finding a […]
jQuery, Determine If an Event Was Triggered by Human or by jQuery $.trigger()
jQuery, Determine If an Event Was Triggered by Human or by jQuery $.trigger()
That moment when you need to add an additional feature if a click was not made by the user but rather by the code:
Customizing Your WordPress Site: Tailoring Your Brand Identity
Building a distinctive brand identity is crucial for any business wanting to stand out these days. Customizing your WordPress site can help you achieve this. Consumers are becoming more discerning and educated, seeking brands with compatible values and the ability to deliver real value. Fortunately, customizing your WordPress website is one of the best ways […]