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.
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'});
}
});