Over a million developers have joined DZone.

An Animated Responsive Grid with a Filtering Feature

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

This is a followup to my previous post, where we created a beautiful responsive grid with barely six lines of JavaScript. But this time, we have added a filtering feature and a category/tag selector that triggers the filtering. For filtering, we have used the MixItUp library in this example.

Have a look at the live demo at http://hasinhayder.github.io/ResponsiveGalleryWithFiltering. Resize the browser window and see how the grid items adapt to the new width. Select categories from the drop-down list in the top right corner to see how the filtering works.

Positioning the drop-down list was managed using media queries, which you can see at the bottom of the <style> block.

One more thing to note here (a very important note, perhaps). If you have used MixItUp before then you probably already know that every time MixItUp refreshes the list, it actually removes the old list items and redraws them in the container. This phenomenon removes any events attached to the list items. To fix it up, you need to attach event listeners using the $.delegate() method, as done in the example. Let's have a look at that:
$(".grid ul").delegate("li","click",function(){
	var src = $(this).find("img").attr("src");


Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Hasin Hayder, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}