Databases
StackOverflow2013
Postsdbo
POjquery isotope - sort, layout AND multiple filters
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery isotope - sort, layout AND multiple filters
    text
    copied!<p>I'm trying to create a page with sorting, layout buttons and multiple filters. The isotope homepage is a good example, but there's only one filter there. Using that page I can't figure out how to add more filters that will work together (i.e. colour and size, working together, not one at a time). Below is the code... How do I add another filter?</p> <pre><code> &lt;div class="option-combo"&gt; &lt;h2&gt;Filter:&lt;/h2&gt; &lt;ul id="filter" class="option-set clearfix" data-option-key="filter"&gt; &lt;li&gt;&lt;a href="#show-all" data-option-value="*" class="selected"&gt;show all&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#elements" data-option-value=".element:not(.feature)"&gt;elements&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#features" data-option-value=".feature"&gt;features&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#examples" data-option-value=".example"&gt;examples&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="option-combo"&gt; &lt;h2&gt;Sort:&lt;/h2&gt; &lt;ul id="sort" class="option-set clearfix" data-option-key="sortBy"&gt; &lt;li&gt;&lt;a href="#sortBy=original-order" data-option-value="original-order" data&gt;original-order&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#sortBy=name" data-option-value="name"&gt;name&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#sortBy=year" data-option-value="year" class="selected"&gt;year&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#sortBy=size" data-option-value="size"&gt;size&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#sortBy=random" data-option-value="random"&gt;random&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="option-combo"&gt; &lt;h2&gt;Layout: &lt;/h2&gt; &lt;ul id="layouts" class="option-set clearfix" data-option-key="layoutMode"&gt; &lt;li&gt;&lt;a href="#masonry" data-option-value="masonry" class="selected"&gt;masonry&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#fitRows" data-option-value="fitRows"&gt;fitRows&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#straightDown" data-option-value="straightDown"&gt;straightDown&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>And this is the javascript:</p> <pre><code>$(function(){ var $container = $('#container'); $container.isotope({ masonry: { columnWidth: 70 }, sortBy: 'year', sortAscending : false, getSortData: { name : function ( $elem ) { return $elem.find('.name').text(); }, size : function ( $elem ) { return parseInt( $elem.find('.Size').text().replace( /,/g, ''), 10 ); }, year : function ( $elem ) { return parseInt( $elem.find('.year').text().replace( /,/g, ''), 10 ); } } }); var $optionSets = $('#options .option-set'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // make option object dynamically, i.e. { filter: '.my-filter-class' } var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value'); // parse 'false' as false boolean value = value === 'false' ? false : value; options[ key ] = value; if ( key === 'layoutMode' &amp;&amp; typeof changeLayoutMode === 'function' ) { // changes in layout modes need extra logic changeLayoutMode( $this, options ) } else { // otherwise, apply new options $container.isotope( options ); } return false; }); }); </code></pre> <p></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload