Tema: Hacerle a un div el resize de un textarea
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 09/09/2016, 12:13
mpozo
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 9 años, 2 meses
Puntos: 86
Respuesta: Hacerle a un div el resize de un textarea
Supongamos que existe una propiedad que se llama resize y supongamos que nos importa que ie no la acepte
Código CSS: 
Ver original
  1. div{
  2.   resize: both;
  3.   overflow: auto;
  4. }
[URL="http://caniuse.com/#search=resize"]Tabla de compatibilidad[/URL]

Pero casi siempre hay un roto para un descosido. Aunemos ambos lenguajes
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="es-es">
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <style>
  7.         div{
  8.             width: 250px;
  9.             height: 150px;
  10.             background-color: red;
  11.             resize: both;
  12.             overflow: auto;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.  
  18.     <div id="foo"></div>
  19.  
  20.  
  21.     <script>
  22.         var div = document.querySelector("#foo"), flag = false;
  23.  
  24.         if (!('resize' in div.style)) {
  25.  
  26.             div.addEventListener("mousedown", function(){
  27.                 flag = true;
  28.             }, false);
  29.              
  30.             document.addEventListener("mouseup", function(event){
  31.                 if (flag){
  32.                     div.style.width = event.clientX + "px";
  33.                     div.style.height = event.clientY + "px";        
  34.                     flag = false;
  35.                 }
  36.             }, false);
  37.         }
  38.     </script>
  39.  
  40. </body>
  41. </html>
Esto hará que si el navegador no acepta la propiedad, se logre el mismo efecto con código javascript