Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Implementing Isotopes JS combination filters in my application

This question was posted through the quick post service. Please let me know what info can help you solve it. I'm having some difficulty getting multiple combo filters working with the Isotopes JS library (I'm still using V1, not brave enough to jump into V2 yet).

I have set it up in Jquery Mobile 1.4.2 (recently upgraded) and I have it set to work with radio button sets but I can't implement the script properly. So far I can get the filtering to work in isolation (besides Dave's documentation seems to be a bit contradictory (demos use different coding than examples), sort of like phonegap/cordova).

Yeah, so I'm not really a whizz with JS and I'd like some help as I've already spent enough time on this problem and have not got anywhere with it.

You can find the latest working example @ http://thebeachschool.eq.edu.au/freshwater-app/ I'm not sure how I can attach any files to this post entry but hopefully we can get to that point if someone here is interested in taking on the job.

Thanks, Ryan A

User Gravatar

coolwebs

Posted Mar 10 2014 18:04 UTC

$50


  • Assigned To guyisra
  • Solved
  • javascript
    isotope filters
    phonegap
  • 1996 Views

15 Replies


I don't see what doesn't work, the radios seems to work fine. Can you give an example on what doesn't work?

The only thing I found that is missing is that in

$(function(){

      var $container = $('#container'),
          $radios = $('#filters input');

      /*$container.isotope({
        itemSelector: '.item'
      });*/

it runs as soon as the page is loaded, and it is best to run this code once the page is ready (and so is the images)

do this (instead of the $(function(){ part)

$(document).ready(function(){
User Gravatar

guyisra

Posted Mar 11 2014 1:44 UTC

Thanks for the tip guyisra.

The problem happens when you start toggling with the filters. They don't append properly and I have not set a variable or array to store the value. I looked into the isotopes documentation page for the code at http://isotope.metafizzy.co/demos/combination-filters.html

but I could not integrate it into my code. That's the real issue, plus I'm having a glitch with the code I have commented out (that's why i commented it out). When 'uncommented' all the divs get stacked on top of each other vertically. As it is, when you first apply a filter it jumps and does not animate.

User Gravatar

coolwebs

Posted Mar 11 2014 6:32 UTC

ok so first thing first

the divs gettings stacked on top of each other happens since the isotope code fires before the images do there are 2 ways to solves this:

option 1 (might be preferred in your case)

set the width and height of the item's image like so

<img src="img-file.jpg" width="135" height="110" />

this will help isotope figure out the dimensions of the items

option 2 (less preferred, more js)

is to use the imagesLoaded plugin (which is included with isotope) and do something like

$container.imagesLoaded(function(){
 $container.isotope({
        itemSelector: '.item'
      });
});

this will fire isotope only after all the images within $container have been loaded.

now for the 2nd part -

lets take the mayfly as an example

<div class="item nonmicro noshell threepairs haswings threetail vSensitive isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(572px, 266px, 0px) scale3d(1, 1, 1); opacity: 1;"><a href="specimens/mayfly.html" rel="external" class="ui-link"><figure><img src="img/thumbs/mayfly-thumb.jpg"><figcaption>Mayfly</figcaption></figure></a></div>

so it has no shell but it does have legs, yet it appears when filtering no legs and no shell.

the current isotope filtering is something like

filters=[];
$radios.filter(':checked').each(function(){
          filters.push( this.value );
});
 // ['.red', '.blue'] -> '.red, .blue'
 filters = filters.join(', ');
  $container.isotope({ filter: filters });

so this does exactly as stated in the comments - .red, .blue. which in your case is .nolegs, .noshell

so when filtered using this filter, the mayfly does appear since the filter states .nolegs or .noshell

so the filter in this case should be filters = filters.join(''); to make the filter selections an and instead of or, making it .noshell.nolegs

this would require you to make sure each item has the appropriate classes so it would appear in at least one type of selection.

so to recap -

uncomment the isotope initialization, add either add the image dimensions (preferred - also faster) or add imagesLaded, and change the filters.join(', ') to filters.join('')

let me know if I'm in the ballpark or way off :)

User Gravatar

guyisra

Posted Mar 11 2014 10:45 UTC

Solution

This didn't solve your task? Get your own custom solution.

change filter in filters = filters.join(', ') to filters = filters.join(',') because is or

User Gravatar

oirasor

Posted Mar 12 2014 15:50 UTC

Hey, I think you are onto a winner with your recommendation of changing the filters.join method. Although the space between the Quot marks threw me off, it's actually filters.join('') (I checked up on the combination filter demo).

Unfortunately, giving the images their HTML hardcoded width and height did not solve the issue of the single column stacking.

I really appreciate your help with this!

User Gravatar

coolwebs

Posted Mar 12 2014 20:32 UTC

I just saw the comment by oirasor just as I made the last comment. Thanks anyhow, I managed to figure out not to put a space between the quote marks or a comma. @guyisra, is there any change of a fix for the vertical stacking? If I can get that working, I'm quite happy to set you as the correct answer.

User Gravatar

coolwebs

Posted Mar 12 2014 20:37 UTC

to fix the vertical stacking you need to have the

$(document).ready(function(){ 

instead of

$(function(){
User Gravatar

guyisra

Posted Mar 12 2014 22:44 UTC

This is the code I am using and it is still causing issues:

$(document).ready(function(){

  var $container = $('#container'),
      $radios = $('#filters input');

  $container.isotope({
    itemSelector: '.item'
  });

  $radios.change(function(){
    var filters = [];
    // get checked radios values
    $radios.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // i.e ['.noshell', '.nolegs'] -> '.nolegs, .noshell'
    filters = filters.join('');
    $container.isotope({ filter: filters });
  });

  $('#shuffle').click(function(){
    $container.isotope('shuffle');
  });       
});  
User Gravatar

coolwebs

Posted Mar 13 2014 2:51 UTC

add

 setTimeout(function(){
           $container.isotope('reLayout')
    },1000);

after

  $container.isotope({
    itemSelector: '.item'
  });
User Gravatar

oirasor

Posted Mar 13 2014 3:02 UTC

or replace

$(document).ready(function(){

in

$(window).on('load',function(){
User Gravatar

oirasor

Posted Mar 13 2014 3:04 UTC

Thanks for that but none of those solutions are working. It wasn't always like this, only happened when I combined multiple pages into one. I think another script is affecting it somehow. I will do some 'painful' debugging and get back to you.

User Gravatar

coolwebs

Posted Mar 13 2014 6:44 UTC

i watch the url http://thebeachschool.eq.edu.au/freshwater-app and don't watch my modify

User Gravatar

oirasor

Posted Mar 13 2014 9:29 UTC

Oh yeah, I was doing it locally and had not updated the online version...

User Gravatar

coolwebs

Posted Mar 13 2014 15:21 UTC

Hi coolwebs,

The problem is in the way the jQuery mobile is working. You have to know that the ready and load event doesn't work as you expect here. This is because jQuery mobile is loading the new pages via ajax, so no ready or load events are triggered while you navigate in your app.

So, here is the fix:

$(document).on('pageinit', function(){

  var $container = $('#container'),
      $radios = $('#filters input');

  $container.isotope({
    itemSelector: '.item'
  });

  $radios.change(function(){
    var filters = [];
    // get checked radios values
    $radios.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // i.e ['.noshell', '.nolegs'] -> '.nolegs, .noshell'
    filters = filters.join('');
    $container.isotope({ filter: filters });
  });

  $('#shuffle').click(function(){
    $container.isotope('shuffle');
  });       
});

As you can see, I'm using the 'pageinit' event. It's jQuery mobile event, and it's triggered when the page is loaded and inserted into DOM via ajax.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Mar 15 2014 8:35 UTC

Hi there,

Sorry I took so long to get back to this job but some other urgent matters came up last week that I had to deal with. @Nikola, that solution still did not work.

The best solution that has been provided so far is filters = filters.join(''); instead of using filters = filters.join(', ');

In the end, I have decided to load the filter page without ajax, essentially refreshing the DOM. I know it's not really the ideal way, but it works really well and there is not much lag.

User Gravatar

coolwebs

Posted Mar 25 2014 1:40 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions