Custom resize of a div

Asked

Viewed 910 times

4

How to customize the resize so that it is possible to resize anywhere at the bottom of the div
Example of the stackoverflow: inserir a descrição da imagem aqui

.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

  • Good night! I copied from the site itself here! "Stackoverflow" tested and worked, but in the corner. <! -- Begin snippet: js Hide: false console: true Babel: false --> <!-language: lang-html --> <textarea id="wmd-input" class="wmd-input wz-element s-input bar0 processed" name="post-text" cols="52" Rows="15" tabindex="80" data-wz-state="8" data-min-length="" style="opacity: 1; height: 43px;"></textarea> <!-- end snippet -->

  • 1

    Short answer: will have to use Javascript

  • 1

    With jQuery UI you get it easy. If you want I can post an example.

  • Could you give me a simple example with comments explaining?

  • 2

    You can see here with comments: https://jsfiddle.net/kcth8j5v/11/

1 answer

3


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

I detect if div .drag was triggered to increase the size of the textarea according to the position I am 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 the height, I would particularly wear a Math.min and Math.max to define the minimum and maximum size that the element could reach height.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.