Mix It Up Filtering for dynamic blog post content doesn't filter

Design help Custom code
9

Hello, @heywoodej

:point_up: the reason is that you “divided” your collection into 2 parts and limited them:

Filtering plugin is working with the content that already on the page and can’t know what more you have in your database.

You could use custom CSS for make first 2 items have a different width, but then it also will look weird if only 1 of them will be elected by some filter and other items in that filtered categories will have a smaller width.

CloudApp

That problem exists because this category has 2 words. The code snippet takes the text “Music Production”, “reads” only 1st word (until it meets the space character), lowercase it and create the classname for the item. So you get the class .music. At the same time, current code that creates dynamic filtering menu doesn’t do that and you have different classname in the data-filter attribute

37 PM

You will need to change a little bit the part of the code that creates dynamic filtering menu, so it will do the same.

Change this :point_down:

31 PM

to this :point_down:

// Adding data-filter attributes for filtering:
$('#dyn-filter-menu > div').each(
	function() {
	  var catName = "." + $(this).children('a').text();
      var select = catName.indexOf(' ') == -1 ? catName.length : catName.indexOf(' '); 
       var classCatName = catName.substr(0, select);

      $(this).attr('data-filter', classCatName.toLowerCase());

});

That will make all your filters work.

2 Likes