Hello,
I was using the following code to filter a portfolio with a simple pull-down menu in v4.5. After upgrading to v5.0, selecting from the pull down menu just jumps me to the top of the page. It does not filter the portfolio as before. If I change COMBINATION-FILTER to PORTFOLIO-FILTER it filters the portfolio properly, but I don't get the nice simple vertical list in the drop-down.
What would be the best way to get the same drop-down menu, filter functionality in v5?
<!-- Portfolio Filter ============================================= -->
<div class="container combination-filter center clearfix bottommargin" data-container="#portfolio">
<div class="btn-group" role="group" data-filter-group="type" style="margin-left: 10px;">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="filter-text">Filter Projects by Type</span> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Show All</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">CAD</a></li>
<li><a href="#">Rendering</a></li>
<li><a href="#">Prototyping</a></li>
<li><a href="#">Sourcing</a></li>
<li><a href="#">Quality Assurance</a></li>
<li><a href="#">Production Management</a></li>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Indoor</a></li>
<li><a href="#">Contract</a></li>
<li><a href="#">Marine</a></li>
<li><a href="#">Decor</a></li>
</ul>
</div>
</div>
...
<script type="text/javascript">
jQuery(window).load( function(){
var filters = {};
var $container = $('.grid-container');
$container.isotope();
$('.combination-filter').on( 'click', '.dropdown-menu a', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.btn-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
$container.isotope({ filter: filterValue });
$buttonGroup.toggleClass('open').find('.filter-text').html( $this.html() );
return false;
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
$(window).resize(function() {
$container.isotope('layout');
});
});
</script>