Question

The window.resize event in IE doesn’t do what I thought it does.

I thought it only triggered when the physical window/view-port changed size (i.e. user hits maximize on the browser window for example), but it is also triggered if I change the document size, introducing scroll bars.

Is there any way to tell those two things apart: view port resize, and document resize without writing an elaborate hack?

Answer 1

No takers? well here is the hack (not tested – but the idea is right)

function viewPortResize(fn, context){
  context = context || window;
  var $window = $(window);
  var winWidth = $window.width();
  var winHeight = $window.height();

  return function(e){
    var oldW = winWidth;
    var oldH = winHeight;
    winWidth = $window.width();
    winHeight = $window.height();
    if (winWidth != oldW || winHeight != oldH){
      fn.apply(context, [e]);
    }
  }
}


//use:
$(window).resize(viewPortResize(function(e){
    alert("this only happens when viewport is resized!");
});