Issue
I have a resizeable div like this:
div{
resize:both;
overflow:hidden;
height:10rem;
width:10rem;
border:solid 0.5rem black;
}
<div id="item" ></div>
How do I invoke a function after it has completed resizing?
i.e. I don't want the function to continuously invoke while it's being resized,
rather I need it to invoke after the mouse has been lifted from the bottom right resizing icon
Solution
You could just check the mouseup
event, and track the old v new size.
The only gotcha here is if there are other ways to resize the div other than using the mouse.
const item = document.querySelector('#item');
function getSize() {
return {
w: item.offsetWidth,
h: item.offsetHeight
}
}
let old = getSize();
item.addEventListener('mouseup', () => {
let n = getSize();
if (old.w !== n.w && old.h !== n.h) {
console.log('resized: ' + JSON.stringify(n));
old = n;
}
});
#item {
resize:both;
overflow:hidden;
height:10rem;
width:10rem;
border:solid 0.5rem black;
}
.as-console-wrapper {
max-height:50px!important;
}
<div id="item" ></div>
Answered By - Keith
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.