Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

An Animated Responsive Grid with a Filtering Feature

DZone's Guide to

An Animated Responsive Grid with a Filtering Feature

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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");
	alert(src);
});

Enjoy!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}