Jquery filter plus running multiple functions

Question

I am having trouble getting my filtered table to change views at the same time. You can see it here in this jsfiddle. Ignore the overlapping text for now.

What I want to do is have it change to compact or full view when the button is pressed once. This somehow works when it is the button is clicked twice.. which isn't correct.

Any ideas? I am not great at jquery but I can get things to work

See fiddle and functions at bottom.

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

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

  $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $timeBlock.isotope({ filter: filters });
  });

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

  var $items = $timeBlock.children();

  $("#isotope-reset").click(function(){
      reset();
});


$('#compact').click(function () {
    $('.item').animate({width: "30%"}, 500);
    $('.item').animate({height: "35px"}, 500);
    reset();

});


$('#full').click(function () {
    $('.item').animate({width: "455px"}, 500);
    $('.item').animate({height: "80px"}, 500);
    reset();


});

function reset() {
    $('input[type=checkbox]').attr('checked',false);
    $timeBlock.isotope({
        filter: '*'
    });
}

what browser you have? Your fiddle is working on my Chrome 41.0.2 — daremachine
– daremachine, Commented Mar 25, 2015 at 17:59
Chrome. I may not have been clear. Click the full view button. It will do something... Then click it again and it will do what it should do on the first click. Same with compact (it starts in compact.) — Eric.18
– Eric.18, Commented Mar 25, 2015 at 18:07

daremachine · Accepted Answer · 2015-04-02 16:36:51Z

1

you need to put functions into the queue.

click events do a queue, if animation is completed then run next. Look at documentation on callback complete

$(document).on('click', '#compact', function () {
    $('.item').animate({width: "30%"}, 500, function() {
        $('.item').animate({height: "35px"}, 500, function() {
            $(this).resetItems();
        });
    });
});


$(document).on('click', '#full', function () {
    $('.item').animate({width: "455px"}, 500, function() {
        $('.item').animate({height: "80px"}, 500, function() {
            $(this).resetItems();
        });
    });
});

event reset items, if you use jquery then register that functions into the jquery. It is not necessary but give to you good advantages of jquery

$.fn.resetItems = function() {
    $('input[type=checkbox]').attr('checked',false);
    $timeBlock.isotope({
        filter: '*'
    });
}

JSFIDDLE

answered Apr 2, 2015 at 16:36

daremachine

2,7982 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric.18 Over a year ago

Thanks for the information. I was not familiar with this. It does seem very slow on switching between the two but at at least it performing the full animation.

daremachine Over a year ago

yes but optimalize is sometimes needed. But i am glad it will help to you move step go on.

Collectives™ on Stack Overflow

Jquery filter plus running multiple functions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related