Check if position of element is equal to top: 50%; and left: 50%;

Question

I have this function (it determines whether grid-container in inside of grid-container-wrapper and if not it moves grid-container to the middle of the page with top: 50%; and left: 50%; .

$(window).resize(function() {
        if(document.getElementsByClassName('grid-container')[0].getBoundingClientRect().right > document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().right || document.getElementsByClassName('grid-container')[0].getBoundingClientRect().bottom > document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().bottom || $('.grid-container').position().left < $('.grid-container-wrapper').position().left || $('.grid-container').position().top < $('.grid-container-wrapper').position().top) {
            $('.grid-container').animate({opacity:0}, 200, function() {
                $('.grid-container').css('top', '50%');
                $('.grid-container').css('left', '50%');
                $('.grid-container').css('transform', 'translate(-50%, -50%)');
            } );

            $('.grid-container').animate({opacity:1}, 400);
        }
    });

However, if grid-container is already positioned with top: 50%; and left: 50%; AND HASN'T BEEN MOVED (so the position is still equal to left: 50%; and top: 50%; ), I do not want the function to be executed, even if grid-container is outisde of grid-container-wrapper .

Is there a way to do this?

Answer 1

If you already positioned with top: 50%; and left: 50% you can add a class like 'stopResisize' to the grid-container or any other field and when the resize function is started just look if this class exists. If so than return without doing anything.

$(window).resize(function() {
  if($('.grid-container').classList.contains("stopResisize")) return;
  if ( ... ) {
    ...
    $('.grid-container').classList.add('stopResisize');
  }
}

Answer 2

$(window).resize(function() {
    if(document.getElementsByClassName('grid-container')[0].getBoundingClientRect().right > document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().right || document.getElementsByClassName('grid-container')[0].getBoundingClientRect().bottom > document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().bottom || $('.grid-container').position().left < $('.grid-container-wrapper').position().left || $('.grid-container').position().top < $('.grid-container-wrapper').position().top) {
        if(window.innerWidth - document.getElementsByClassName('grid-container')[0].getBoundingClientRect().right + 20 < $('.grid-container').position().left || window.innerWidth - document.getElementsByClassName('grid-container')[0].getBoundingClientRect().right - 20 > $('.grid-container').position().left || document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().bottom - document.getElementsByClassName('grid-container')[0].getBoundingClientRect().bottom + 20 < $('.grid-container').position().top || document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().bottom - document.getElementsByClassName('grid-container')[0].getBoundingClientRect().bottom - 20 > $('.grid-container').position().top) {
            $('.grid-container').animate({opacity:0}, 200, function() {
                $('.grid-container').css('top', '50%');
                $('.grid-container').css('left', '50%');
                $('.grid-container').css('transform', 'translate(-50%, -50%)');
            } );

            $('.grid-container').animate({opacity:1}, 400);
        }
    }
});