I have a div with a list of items inside, I would like to know how I make a function so that when the user clicks another div below the list, he can resize the height of this div manually Stack Overflow has this system, when you are going to create a question.
I think it's easier to understand with an example: link
When the user clicks on that darker bar and pulls up or down the div should be resized ...
How can I do this using only pure Javascript?
Okay, to do this with native JS you have to take a few steps.
By order will be:
ul In code this might look like this:
window.onload = addListeners;
function addListeners(){
document.querySelector('.resize').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp(){
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e){
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.querySelector('.resize');
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
var altura = div.previousElementSibling.getBoundingClientRect().top;
div.previousElementSibling.style.height = (e.clientY - altura) + 'px';
}