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

Isotope | how to display elements even if they were qualify

Hi,

I just starting using isotope and am stuck at the below. I am not sure where to begin for the said.

Once the user selects multiple filters the elements which don't qualify usually are hidden. I want the elements not to hide but to go down the stack and I want to add a css id/class to them so that I can style them visually.

Thank you, Vishal Khialani

User Gravatar

vishalkhialani

Posted Sep 3 2013 21:48 UTC

$5


  • Assigned To guyisra
  • Solved
  • 1586 Views

9 Replies


Hi,

See this fiddle http://jsfiddle.net/GwBa8/56/

I basically took a basic filter template and changed it a bit

see the code here first, so it would be easier to pick the checked and unchecked, I extended jquery to have an unchecked selector

$.extend($.expr[':'], {
        unchecked: function (obj) {
            return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
        }
    });

then I pick the filters which are checked and those which are not. The items which are unchecked get removed and added to the bottom and you can stylize them as you need. in this case, the items are split to checked and unchecked groups. the css is in the fiddle itself, but its clear what is being done here

$(function(){

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

  $container.isotope({
    itemSelector: '.item',
    // filter red items first

  });
  $checkboxes.change(function(){
    var unchecked = [];
    var checked = [];

    // get unchecked checkboxes values
      $checkboxes.filter(':unchecked').each(function(){
      unchecked.push( this.value );

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

  $checked.removeClass('notpicked');
    $unchecked.addClass('notpicked');
  });


});

let me know if you have more questions on this

User Gravatar

guyisra

Posted Sep 4 2013 5:23 UTC

Solution

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

An alternative solution would be using the sort functionality

see solutiuon here http://jsfiddle.net/GwBa8/60/

basically isotope init with

$(".item").attr("data-num", 1);
  $container.isotope({
    itemSelector: '.item',
     getSortData : {
      picked : function( $elem ) {
           return $elem.attr("data-num");
      }}
  });

this will give all items a data-num with 1, and then isotope will have initial data to sort by

then similar to the other solution I gave, the ending will be

  $checked.attr("data-num",1);
    $unchecked.attr("data-num",2);
      $container.isotope( 'updateSortData', $('.item') )

    $container.isotope({ sortBy : 'picked'});

to update the data-num attribute for the checked and unchecked, and then update the sorting data of the items (this is a must, or else isotope will take the data when it was initialized) and then sort it

User Gravatar

guyisra

Posted Sep 4 2013 6:06 UTC

thank u. I will try it out and get back to u, Vishal

User Gravatar

vishalkhialani

Posted Sep 4 2013 6:41 UTC

I forgot to add these lines in the second solution after the isotope sort

$checked.removeClass('notpicked');
$unchecked.addClass('notpicked');

this is make it stylized according to the checkboxes

User Gravatar

guyisra

Posted Sep 4 2013 7:47 UTC

Hi Guyisra, Thank you for your detailed help. I think the filter method is better. I have an issue though. Please see http://jsfiddle.net/vishalkhialani/MCv7S/

The item elements inside the container can have more than one filters attached to it. In the example here the user can select a '3bedroom' only but it does not work. Then in another use case the user can also select 'building1' and '3bedrrom' and it should work but it does not seem to work perfectly right now.

I am confused as to why its not happening.

Thank you, Vishal Khialani

User Gravatar

vishalkhialani

Posted Sep 4 2013 21:04 UTC

It seems the reason it doesn't work is that mostly no matter what checkboxes you uncheck, the classes are in such a way that they include everything, so they all get removed.

For example, selecting building1 would mean studio is not selected and also 2bedroom and 3bedroom and also building2. That means all disappear. But if you select building1 and studio, you can see it works, since it doesn't overlap.

You should use data attributes to differentiate between the items or make the classes not overlap.

User Gravatar

guyisra

Posted Sep 5 2013 6:11 UTC

this is working as expected http://jsfiddle.net/vishalkhialani/t4rRN/

The demo for sorting is working well however where can I add and remove class .notpicked ? if the user selects 'building1 and studio'.

I want to assign '2bedroom building1' and '3bedroom building1' as .notpicked even thought building1 has been checked.

User Gravatar

vishalkhialani

Posted Sep 5 2013 8:53 UTC

if you add

.notpicked {
   border: 1px solid;
}

you can see when the styling happens.

again, since the classes overlap, you can't say that building1 is checked yet 2bedroom building1 is .notpicked since it does if building1 is selected

to make this happen the conditions need to be more complex than this, which is beyond the scope of this question

User Gravatar

guyisra

Posted Sep 5 2013 9:10 UTC

Hi, I have a question. when not input is checked, how to remove all class 'notpicked' Thank so much.

User Gravatar

thienvc

Posted Nov 14 2013 1:57 UTC

Add a reply

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