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

Isotope expanding item and resetting

On this page I've made at compare feature(sammenlign): http://norwerk.dk/sammenlign-ups-anlaeg/

Login: funkl/norwerk

When two items are checked the compare(sammenlign) button becomes visible. By pushing this button a hidden div in each selected item is shown. And all other items are hidden.

The issue:

  • When pushing Back(tilbage) the isotope layout should reset 100%. But the checkboxes stop working
  • When doing the compare feature a couple of more times the layout stops working properly. It's easier to test it than explaning.

The code I'm using on the compare button looks like this.

 $('.compare-btn').click(function() {
        var filterValue = $(this).attr('data-filter');

        $('.modelSelected .specs').toggleClass('show');

        if ($('.modelSelected .specs').hasClass('show')) {
            $('#models').isotope({ filter: filterValue });
            $('.modelSelected .specs').show();
            $('.compare-btn').html("Tilbage");
            $('.compare-checkbox').hide();
            $(this).attr('data-filter', "");
        } else {
            $('#models').isotope({ filter: '*' });
            $(this).attr('data-filter', ".compare-products");
            $('.compare-checkbox').show();
            $('.compare-checkbox label').removeClass('checked');
            $('.compare-checkbox label input:checkbox').removeAttr('checked');
            $('.modelSelected .specs').hide();
            $('.compare-btn').html("Sammenlign");
            $('.model').removeClass('modelSelected');
            $('.model').removeClass('showCompareButton');
            $('.model').removeClass('compare-products');

        }
        console.log($(".compare .model input:checked").length);
        $('#models').isotope( 'reLayout' );
    });
User Gravatar

funkl

Posted Jun 30 2014 5:31 UTC

$50


  • Assigned To Gaby
  • Solved
  • jquery
    isotope
  • 1519 Views

8 Replies


You need to understand that when setting a filter, it overwrites the previous filters applied. So since the normal filter applied is a function that does dynamic filtering based on different checkboxes/search values, when you apply a different filter with .isotope({ filter: ... }) that function is removed and it no longer applies.

You need to either re-apply that funtion filter (better to create a named function for that and apply it whenever you want to restore that filtering) or combine the compare filter/unfilter inside that method so that it can handle every case

For the first option you should do

function checkboxAndSearchFilter(){
    var $this = $(this),
        comboResult = $this.is(comboFilter),
        itemNumber = +$this.find('.size').text(),
        searchResult = qsRange ? (itemNumber> qsRange.min &&  itemNumber < qsRange.max): true;
    $filterDisplay.text( comboFilter );
    return (comboResult || comboFilter=='') && searchResult;
}

and whenever you need to apply it (even for the first time you apply it) do

$container.isotope({filter: checkboxAndSearchFilter});

So, now, your compare code should look like

$('.compare-btn').click(function() { var filterValue = $(this).attr('data-filter');

    $('.modelSelected .specs').toggleClass('show');

    if ($('.modelSelected .specs').hasClass('show')) {
        $('#models').isotope({ filter: filterValue });
        $('.modelSelected .specs').show();
        $('.compare-btn').html("Tilbage");
        $('.compare-checkbox').hide();
        $(this).attr('data-filter', "");
    } else {
        $('#models').isotope({ filter: checkboxAndSearchFilter });
        $(this).attr('data-filter', ".compare-products");
        $('.compare-checkbox').show();
        $('.compare-checkbox label').removeClass('checked');
        $('.compare-checkbox label input:checkbox').removeAttr('checked');
        $('.modelSelected .specs').hide();
        $('.compare-btn').html("Sammenlign");
        $('.model').removeClass('modelSelected');
        $('.model').removeClass('showCompareButton');
        $('.model').removeClass('compare-products');

    }
    console.log($(".compare .model input:checked").length);
    $('#models').isotope( 'reLayout' );
});
User Gravatar

Gaby

Posted Jun 30 2014 6:05 UTC

Solution

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

Hi Gaby

I've tried to implement your code. When cliking compare(sammenlign) it works, but clicking back(tilbage) doesn't.

Error: Uncaught ReferenceError: comboFilter is not defined.

User Gravatar

funkl

Posted Jun 30 2014 6:25 UTC

That is because you have nested a $(function(){}) inside another one, and you create a deeper scope for variables declared in there.

Remove the $(function(){ (at line 148)
and }); (at line 248)

in your script.js file.

Final file should be like this http://pastebin.com/L2thz0RY

User Gravatar

Gaby

Posted Jun 30 2014 6:48 UTC

Thanks that helped a lot.

One thing that seems to be broken now is that when three items are selected for comparison and viewed. Then when the back button is clicked only the three checkboxes are reset alle the other ones are still disabled. Can you see why that is?

User Gravatar

funkl

Posted Jun 30 2014 7:30 UTC

That happens because your are disabling some checkboxes while clicking on others.

And once you do a comparison, you never undo those changes.. (this happens because when you change the property of input elements with js it does not fire the change event)

So change the line 483 from

jQuery('.compare-checkbox label input:checkbox').trigger('change');

to

$('.compare-checkbox label input:checkbox').removeAttr('checked').change();

Even better to use the prop instead of the removeAttr

$('.compare-checkbox label input:checkbox').prop('checked', false).change();
User Gravatar

Gaby

Posted Jun 30 2014 11:00 UTC

Perfect. One last tweak. How can I reset all filters when going back from a comparison? A client request...

User Gravatar

funkl

Posted Jul 1 2014 2:43 UTC

Just run

jQuery('#options').find(':input').prop('checked', false).change();
jQuery('#q').val('').keyup();

in your else when closing a comparison.

User Gravatar

Gaby

Posted Jul 1 2014 3:08 UTC

Fantastic. Thanks again :-)

User Gravatar

funkl

Posted Jul 1 2014 3:33 UTC

Add a reply

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