0

Tengo el siguiente codigo:

document.getElementById("container").addEventListener("scroll", function () {
 console.log("scroll Event...");
});
function WrapText() {
 document.getElementById("container").classList.add("WrapText");
}
div {
 width:100%;
 height:50px;
 background-color:yellow;
 overflow: auto;
}
div.WrapText{
 height:100%;
}
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>
<button onClick="WrapText()">Wrap Text</button>

Cuando hago Scroll lo detecto a través del evento onScroll y despliego un mensaje en consola.

Ahora, cuando pulso el botón Wrap Text re dimensiono la ventana y la ajusto al texto.

El problema:
Como detectar el evento de re dimensionamiento de una <div> a través de addEventListener(), es decir, como saber cuando re dimensiono un elemento en el DOM?

NOTA:
Es importante que la solución sea a través de un evento anexo al elemento <div id="container"> tal como hacemos con el evento onScroll y no por el evento onClick aplicado al elemento <button>.

4
  • Pretendes detectar con un evento cuando el elemento con id container cambie de tamaño? Porque de ser así, ya te aviso de que un elemento div no dispara ningún evento "resize".
    – lromeraj
    el 17 may. 2017 a las 5:41
  • Hice la pregunta en SO y si es posible (todo es posible): How to know when you change the dimensions of an element in the DOM
    – fwBasic
    el 17 may. 2017 a las 23:35
  • ajjajajaj yo NO he dicho que sea generalizadamente imposible, solo he dicho que no se puede usar el evento resize como si fuese la ventana del navegador. Claro que todo es posible.
    – lromeraj
    el 18 may. 2017 a las 5:10
  • Bueno, realmente no haz dicho nada, ahora si tienes algo que aportar que pueda ayudar a resolver lo que aquí se plantea eres libre de compartirlo,
    – fwBasic
    el 18 may. 2017 a las 11:11

1 respuesta 1

1

Existe un método muy eficiente para detectar el evento que comentas. Puedes encontrar el plugin en el siguiente enlace.

http://marcj.github.io/css-element-queries/

Esta librería tiene una clase llamada ResizeSensor que puede ser usada para la detección de redimensiones.

Ejemplo:

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

Otra opción que puedes utilizar el MutationObserver. La documentación la puedes encontrar en el siguiente enlace: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver. A continuación un ejemplo:

// Selecciona el nodo
var target = document.getElementById('some-id');
	 
// Crea al instancia del observador
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
	    alert("change");

        // Deja de observar
	    observer.disconnect();
	});    
});
	 
// Configura el observador
var config = {
	attributes: true
};
	 
// Pasa la opciones y el target al inicio de la observación
observer.observe(target, config);

setTimeout(function(){
	document.getElementById('some-id').style.height = "200px"
}, 3000);
<body>
    <div id="some-id" style="height:20px; width:20px; background-color:red">
    </div>
</body>

No utilices el plugin jQuery onresize, es muy lento debido que se basa en iteraciones con timeout, algo que es increíblemente lento.

1
  • +1 Hector - Gracias por tu respuesta sin embargo hay un Web Api MutationObserver() que plantea una solución adecuada a mi pregunta, si te parece mejora tu respuesta incluyendo esta opción y calificare tu respuesta como aceptada, Saludos!! ;)...
    – fwBasic
    el 18 may. 2017 a las 11:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.