CODEWITHSUNDEEP
javascriptjqueryeventsresizemouseevent
kjo
kjo

Reputation: 35301

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

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.

Upvotes: 9

Views: 3060

Answers (2)

Servus
Servus

Reputation: 517

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

Upvotes: 0

Ilya Kharlamov
Ilya Kharlamov

Reputation: 3932

$ 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!');
});

Upvotes: 1

Related Questions