Passing multiple conditions to window resize

Question

I want to pass 2 conditions to be met on window resize in order to perform these actions. The container thumb has to be visible AND the project_thumb must have a margin bottom of 1px. Can anyone show me how to do this?

window.onresize = function () {


if (!$('#container_thumb').is(':visible')) {
//and 
    if ($(".project_thumb").css("margin-bottom") === "1px") {
        $('.info-top').appendTo('#Grid');
        $('.data').appendTo('#Grid');
        $('#middle').hide();

    } else {


        $('.info-top').appendTo('#middle');
        $('.data').appendTo('#middle');
        $('#middle').show();


    }


};

Answer 1

Use the logical AND operator &&:

if ($('#container_thumb').is(':visible') && $('.project_thumb').css('margin-bottom') === '1px') {
  // do stuff
}

Answer 2

You just need to use AND or &&. I also switched to jQuery's event handling for the resize event.

$(window).on('resize', function(){
  if ( $('#container_thumb').is(':visible') && $(".project_thumb").css("margin-bottom") === "1px" ) {
    $('.info-top').appendTo('#Grid');
    $('.data').appendTo('#Grid');
    $('#middle').hide();
  } else {
    $('.info-top').appendTo('#middle');
    $('.data').appendTo('#middle');
    $('#middle').show();
  } 
})