Increase the size of a DIV manually

Question

I have a div with a list of items inside, I would like to know how to do a function so that when the user click another div below the list, he can resize the height of this div manually (Stack Overflow itself has this system, when you will create a question.

I think it’s easier to understand with an example: http://jsbin.com/bokusovuba

When the user clicks on that darker bar and pulls up or down the div should be resized...

How can I do this using pure Javascript only?

Answer 1

Okay, to do this with native JS you have to take a few steps.

In order will:

• Tie Event Headset to mousedown
• Tie event headset to Mousemove
• make bar have position: Absolute
• give top position equal to mouse position
• calculate the coordinate of the corner of the ul
• calculate the difference between that coordinate and the mouse position
• give the height of the div that difference.

In code it can be 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';
}

Example: http://jsbin.com/kukocuqoqo/1/