I'm using the latest Isotope (v2) and it seems the Hash History no longer works from V1.
I would like to be able to link to a certain filter from another page. For example I'm on 'about.html' which contains a link to 'support.html#filtertype'.
This is my current setup.
HTML:
<ul id="filters" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li><a data-filter="*">All</a></li>
<li><a data-filter=".chocolate">Chocolate</a></li>
<li><a data-filter=".sweets">Sweets</a></li>
<li><a data-filter=".mellows">Mellows</a></li>
</ul>
<ul class="isotope">
<li class="chocolate">CHOCOLATE</li>
<li class="sweets">SWEETTS</li>
<li class="chocolate">CHOCOLATE</li>
<li class="mellows">MELLOWS</li>
</ul>
jQuery:
$(window).load(function(){
var $container = $('.isotope').isotope({
itemSelector: '.isotope li',
layoutMode: 'fitRows'
});
$('#filters li').on( 'click','a', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
$('#filters li a').removeClass("selected");
$(this).addClass("selected");
$container.isotope({ filter: filterValue });
});
$('#filters li').click(function(){
var filterName = $('#filters li a.selected').text();
$('.filter-text').text(filterName).append('<span class="caret"></span>');
});
// change is-checked class on buttons
$('#filters').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'a', function() {
$buttonGroup.parent().find('.active').removeClass('active');
$( this ).parent().addClass('active');
});
});
});
Demo:
http://codepen.io/anon/pen/jELYeo
How would I make it so I can link to a specific filter from another page?
Sweets will be a type of products in the same page, so what is confusing is that you are saying "from another page". The actual page is only 1 and it is product.html, then in this page you have different types of products. That's what you html looks like.
Then to clarify a bit: Hash history from V1, works with V2.
First use bootstrap, secondly use isotope v2 and its element sizing new feauture. Also you need to use COMBO filters (from V1 as you want the hash history too) as you will have many different products types. The codes for COMBO+History is from v1 but it stills works even if you use V2. remember you need to add jquery.ba-bbq.min.js as there is no more in V2.
Menu ( I am pasting a menu I used so you will have to change it accordinngly to yours):
<div class="options clearfix combo-filters">
<ul class="nav navbar-nav navbar-right">
<li class="option-combo dropdown Agency">
<a class="btn btn-default btn-lg dropdown-toggle needsclick" data-toggle="dropdown" href="#" role="button" id="dropdownMenu1" aria-expanded="true">Agencies <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter-group="Agency">
<li><a class="btn btn-default btn-lg" href="#" data-filter-value="">Agencies</a></li>
<li><a id="filter-tbwa" class="btn btn-default btn-lg" href="#filter-agency-tbwa" data-filter-value=".tbwa">tbwa</a>
</li>
<li><a id="filter-ogilvy" class="btn btn-default btn-lg" href="#filter-agency-ogilvy" data-filter-value=".ogilvy">ogilvy</a></li>
</ul>
</li>
<li class="option-combo dropdown Client">
<a class="btn btn-default btn-lg dropdown-toggle needsclick" data-toggle="dropdown" href="#" role="button" id="dropdownMenu2" aria-expanded="true">Clients <span class="caret"></span></a>
<ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu2" data-filter-group="Client">
<li><a class="btn btn-default btn-lg" href="#" data-filter-value="">Clients</a></li>
<li><a id="filter-vodafone" class="btn btn-default btn-lg" href="#filter-client-vodafone" data-filter-value=".vodafone">vodafone</a></li>
<li><a id="filter-sky" class="btn btn-default btn-lg" href="#filter-client-sky" data-filter-value=".sky">sky</a></li>
</ul>
</li>
<li class="option-combo dropdown Year">
<a class="btn btn-default btn-lg dropdown-toggle needsclick" data-toggle="dropdown" href="#" role="button" id="dropdownMenu3" aria-expanded="true">Years <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu3" data-filter-group="Year">
<li><a class="btn btn-default btn-lg" href="#" data-filter-value="">Years</a></li>
<li><a id="filter-y2013" class="btn btn-default btn-lg" href="#filter-year-y2013" data-filter-value=".y2013">y2013</a></li>
<li><a id="filter-y2014" class="btn btn-default btn-lg" href="#filter-year-y2014" data-filter-value=".y2014">y2014</a></li>
<li><a id="filter-y2012" class="btn btn-default btn-lg" href="#filter-year-y2012" data-filter-value=".y2012">y2012</a></li>
</ul>
</li>
<li><button class="btn btn-link btn-lg no-bkg" id="open-button">About</button></li>
<li><button class="search-btn btn btn-link btn-lg no-bkg">search</button></li>
</ul>
</div>
In jQuery you'd run:
// store filter for each group
var initialOptions = {
itemSelector : '.item',
layoutMode: 'packery',
packery: {
columnWidth: '.grid-sizer',
isFitWidth: true
}
};
// build a hash for all our options
var options = {
// special hash for combination filters
comboFilters: {}
};
Your html for your products would look like this (then again, you will have to add your classes and your data attributes, this is just an example based on my menu):
<div class=container">
<div class="row">
<div id="container">
<div class="grid-sizer col-sm-2 col-md-4 col-lg-3"></div>
<div class="item Agencies clients ogilvy vodafone y2014 Years col-xs-12 col-sm-8 col-md-8 col-lg-6 loadedItem" data-client="vodafone" data-agency="ogilvy" data-year="2014">
<div class="item Agencies clients tbwa sky y2012 Years col-xs-12 col-sm-8 col-md-8 col-lg-6 loadedItem" data-client="sky" data-agency="tbwa" data-year="2012">
<div class="item Agencies clients super barilla y2010 Years col-xs-12 col-sm-8 col-md-8 col-lg-6 loadedItem" data-client="barilla" data-agency="super" data-year="2010">
</div>
</div>
</div>
Fot the hash histroy you'd do:
// filter buttons
$('.filter').on( 'click', 'a', function( event ) {
var $this = $(this);
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
var group = $optionSet.attr('data-filter-group');
options.comboFilters[ group ] = $this.attr('data-filter-value');
$.bbq.pushState( options );
});
function selectLink( $link ) {
$link.parents('.option-set').find('.selected').removeClass('selected');
$link.addClass('selected')
}
var location = window.location;
var $comboFilterOptionSets = $('.combo-filters .option-set');
function getComboFilterSelector( comboFilters ) {
// build filter
var isoFilters = [];
var filterValue, $link, $optionSet;
for ( var prop in comboFilters ) {
filterValue = comboFilters[ prop ];
isoFilters.push( filterValue );
// change selected combo filter link
$optionSet = $comboFilterOptionSets.filter('[data-filter-group="' + prop + '"]');
$link = $optionSet.find('a[data-filter-value="' + filterValue + '"]');
selectLink( $link );
}
var selector = isoFilters.join('');
return selector;
}
$( window ).on( 'hashchange', function() {
// get options from hash
if ( location.hash ) {
$.extend( options, $.deparam.fragment( location.hash, true ) );
}
// build options from hash and initial options
var isoOptions = $.extend( {}, initialOptions, options );
if ( options.comboFilters ) {
isoOptions.filter = getComboFilterSelector( options.comboFilters );
}
$container.isotope( isoOptions );
})
// trigger hashchange to capture initial hash options
.trigger( 'hashchange' );
CSS
#container {
margin: 0 auto;
}
Not just this would center your layout but it will also be responsive. grid-sizer will be your columnWidth and it would change its width based on your bootstrap classes making the whole thing responsive as you'd expect, on top of this the number of elements that you will see on each row will be based on your bootstrap class settings. Finally the combo filters will make it possible not just to filter different products but also to change the hash history based on all products you have filtered.
I am using packery as a layout mode as this is what he did to force to always fill all the gaps. But he provides this layout mode separately, therefore remember to include it too.
Note: You need to specify a grid which uses half the width of each boxes if you want different sizes.
I hope that helps
