1

I'm developing a new Hall of Fame for the Wisconsin Badgers. My beta version is viewable at http://www.uwbadgers.com/athletic-dept/hall-fame-beta.html

My question is, when the search feature is used how do I bring the visible elements to the top. It show the correct elements and uses display:none to hide the others. However it does not re-position the elements after the search and the display:none elements still take up space.

It has to do with the "-webkit-transform" style that isotope uses. How do I go about changing this or is there a better way to search using isotope?

I am using http://lomalogue.com/jquery/quicksearch/ for the search as I could not think of a way to do it with isotope alone.

SPillai
  • 177
  • 3
  • 7
  • 20

1 Answers1

2

I would use quicksearch's show and hide options to add appropriate classes that can be used for filtering by Isotope

$('input#id_search').quicksearch('div.member', {
  show: function () {
    $(this).addClass('quicksearch-visible');
  },
  hide: function() {
    $(this).removeClass('quicksearch-visible');
  },
  onAfter: function() {
    $container.isotope({ filter: 'quicksearch-visible'});
  }
});
desandro
  • 2,854
  • 1
  • 22
  • 31
  • Thank you, I used this (`$container.isotope({ filter: $current_filter});`) in the callback of Infinite Scrolling after filtering has been applied to the items. – Anriëtte Myburgh Jul 09 '12 at 20:09