Window resize event

Question

var windowWidth = $(window).width();    
function mobileResponsiveCheck(){
    if(windowWidth >= 768){
        box3Responsiveness();
    }else if(windowWidth < 768){
        null;
    }
}

$(window).resize(function(){
    mobileResponsiveCheck();
});
mobileResponsiveCheck();

So I want to run the function mobileResponsiveCheck() every time the user resizes and also if reloaded. While resizing if window gets smaller than 768px then it is supposed to do nothing. But this only happens when I reload it after it is smaller than 768px. What I want is it box3Responsiveness() stopped as the user is resizing and get below 768px without reload.

Answer 1

You defined windowWidth globally. The variable is set once, namely when the script first runs. However, the value does not change on resize because you don't tell it to. To change that, bring the variable declaration inside your function. That way it will always change when necessary.

function mobileResponsiveCheck(){
    var windowWidth = $(window).width();  
    if(windowWidth >= 768){
        box3Responsiveness();
    }
}

$(window).resize(function(){
    mobileResponsiveCheck();
});
mobileResponsiveCheck();

Answer 2

mobileResponsiveCheck() {
  if (window.innerWidth >= 768){
    box3Responsiveness();
  }
}

window.addEventListener('resize', mobileResponsiveCheck);
mobileResponsiveCheck();