How to detect the mouseup at the end of a window resize?

user_559827 0
Viewed 2401

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.

mouseevent resize events jquery javascript
2 Answers
$ 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!');
});
user_8053250

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))};
user_95492960
Related