Search code examples
jqueryinternet-explorerjquery-events

view-port resize vs document resize in IE


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?


Solution

  • 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!");
    });