Custom resize of a div

Question

Custom resize of a div

Navigation

#1 by (3 votes)

4

How to customize resize so you can resize anywhere in the bottom of div
Example of stackoverflow itself:

.caixa {
  background-color: #444;
 /* margin: 100px auto; */
  height: 100px;
  width: 400px;
  resize: vertical;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom:20px;
}
.ta {
  float: left;
  height: 100%;
  width:33%;}
.ta1 {
  background-color: #000;
}
.ta2 {
  background-color: #ddd;
}
.ta3 {
  background-color: #888;
}
textarea {
  resize:none;
  width: 100%;
  height: 100%;
}

<div class="caixa">
<div class="ta ta1"><textarea></textarea></div>
<div class="ta ta2"><textarea></textarea></div>
<div class="ta ta3"><textarea></textarea></div>
</div>

javascript html css

asked by anonymous 11.08.2018 / 03:06

1 answer

How to change the color of the line below EditText via xml What is the JavaScript Map object for?

score 3 · Accepted Answer

Well, the closest I could do was using the mousemove event.

I detect if the% div is coaxed to increase the size of the .drag according to the position I'm moving the mouse (up or down)

window.addEventListener('load', function () {
  var lastPageY = 0;
  var textarea = document.querySelector('textarea');
  var drag = document.querySelector('.drag');
  
  drag.addEventListener('mousedown', function () {
       drag.classList.add('active');
  }, true);
  
  document.addEventListener('mousemove', function (e) {
  
      var dragEnabled = drag.classList.contains('active') && e.which === 1;
      if (! dragEnabled) return;
 
    // Movimento continua na mesma posição anterior. Então nada é feito
    
    if (e.pageY === lastPageY) return;
    
    // posição da página atual menos o tamanho do .drag
   
    var height = e.pageY - drag.offsetHeight;
    
    textarea.style.height = height + 'px';
    
    // salva a posição anterior :)
    lastPageY = e.pageY;
    
  })
  
  window.addEventListener('mouseup', function (e) {
      drag.classList.remove('active');
      console.log('stopped');
  }, false)
})

*{box-sizing: border-box; }
.drag
{
  background-color: #ddd;

  width: 100%;
  user-select:none;
  text-align: center;
  font-size: 20px;
  display: flex;
  height: 15px;
  justify-content: center;
  align-items: center;
}

.drag.active{
    background-color: #049;
    cursor: move;
    color: white;
}
.container textarea{
  display: block;
  resize: none;
  width: 100%;
  user-select: none;
}

<div class="container">
  <textarea></textarea>
  <div class="drag">
   &bullet;  &bullet;  &bullet;
  </div>
</div>

In the part where textarea is set, I'd particularly use height and Math.min to set the minimum and maximum size the element could reach in height.