9

I'm looking for a way to detect the mouseup event at the very end of a window resizing (when done by dragging). (AFAICT, this event is not picked up by a resize handler on $(window) or on $(document).)

PS: for my purposes it is OK to define a "drag-resize" as the resizing that takes place between a mousedown (on a suitable resizing locus on the window) and its corresponding mouseup event, disregarding any pauses the user may make, while still holding down the mouse button, between those two end points.

kjo
  • 33,683
  • 52
  • 148
  • 265
  • 2
    IE has a `resizeEnd()` event but you'll need something more cross-browser. The current best practice I believe is to wait for the browser to "stop resizing", as in "you have your mouse down but haven't done anything with it for *x* amount of time." When that time expires, you can raise an event. See here for examples: http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac – Cᴏʀʏ Dec 17 '13 at 12:58
  • Four years, and no one has an answer? Anyone? Anyone? Bueller? – SMBiggs Sep 18 '17 at 05:38

2 Answers2

1
$ npm install resizeend

or add to your page:

<script src="https://raw.githubusercontent.com/jeremenichelli/resizeend/master/dist/resizeend.min.js"></script>

and then just use the event:

window.addEventListener('resizeend', function() {
    alert('You are not resizing the window anymore!');
});
Ilya Kharlamov
  • 3,698
  • 1
  • 31
  • 33
0

I wasn't able to get something 100%well-working. But it kind of works. The plan was to check for a certain pixel per ms(here I check for the middle of the resize, in the beginnig and the end the resize is usually under 1.5) and then set a timer but the browser isn't acourate enough and only fires like 8 times a resize.

let resizeTimer;
let w = 0;
let ww = 100;
let t = new Date();
t=t.getTime();
let tt = new Date();
let d = 0;
let ms = 0;

window.onresize = function(){
    ww = w;
    w = window.innerWidth
    d=w<ww?ww-w:w-ww;
    tt = new Date();
    tt = tt.getTime();
    ms= tt-t;
    t=tt;
    console.log(d/ms)
    if(d/ms>1.5){clearTimeout(resizeTimer);
    resizeTimer= setTimeout(function(){console.log("trigger")}, 210);
    }
};

minified version: 

var a,b=0,c=100,d=new Date;d=d.getTime();var e=new Date,f=0,g=0;window.onresize=function(){c=b;b=window.innerWidth;f=b<c?c-b:b-c;e=new Date;e=e.getTime();g=e-d;d=e;1.5>f/g&&(clearTimeout(a),a=setTimeout(function(){console.log("trigger")},210))};
Servus
  • 479
  • 3
  • 13