If you are like me, you may at times require to monitor changes in the window size and perform certain actions at particular window size stops along the way. This snippet of code is useful to monitor when a window is resized and passes through configurable ‘stops’ and then triggers an event on the window.

$(window).resize(function() {

  var stops = [480, 600, 768, 1024];
  var width = $(window).width();

  window.last_width = (window.last_width ? window.last_width : 0);

  for(var i in stops) {
    var next_stop = (i < (stops.length-1) ? stops[parseInt(i)+1] : 100000);
    var prev_stop = (i > 0 ? stops[i-1] : 0);
    if(width <= stops[i] && (window.last_width > stops[i] && window.last_width < next_stop)) {
      //console.log("stop: " + stops[i] + ", reducing");
      $(window).trigger("responsive_shift", [{stop: stops[i], direction: 'down', current_width: width, last_width: window.last_width}]);
    } else if(width > stops[i] && (window.last_width <= stops[i] && window.last_width > prev_stop)) {
      //console.log("stop: " + stops[i] + ", increasing");
      $(window).trigger("responsive_shift", [{stop: stops[i], direction: 'up', current_width: width, last_width: window.last_width}]);
    }
  }
  window.last_width = width;
});

$(window).on("responsive_shift", function(e, params) {
  console.log(params.stop);
  console.log(params.direction); //either up or down
});