Is there an event that captures size changes of an HTML element?

Question

Is there an event that captures size changes of an HTML element?

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

6

I wonder if there is an event that captures size changes of an HTML element. For example, a div with 5000px height is 4800px and Javascript onresize() fault does not fire.

Is there an event that captures this?

HTML:

<div id="teste" style="height:1500px; background:#F00"></div>

JS:

// Evento que vai captura a mudança na altura dp documento
window.onresize = function(){
    alert('mudança na altura do documento');
}
// Diminui o div para disparar o evento
setTimeout(function(){ 
    document.getElementById('teste').style.height = '300px' 
}, 3000);

Fiddle

Note that the height of the document is changed but the resize event does not fire.

Thank you in advance.

javascript html css

asked by anonymous 09.12.2014 / 14:40

4 answers

How to increase the text size of a WebView? Comparing prepare () vs query () with mysqli

score 1 · Answer 1

A workaround:

var elemento = $("#teste");
var onResize = function() {
  elemento.css("background-color", "green");
  console.log("RESIZE!!");
};


elemento.data("size", {
  width: elemento[0].offsetWidth,
  height: elemento[0].offsetHeight
});

var interval = setInterval(function() {
  if (elemento.data("size").width != elemento[0].offsetWidth || elemento.data("size").height != elemento[0].offsetHeight) {
    onResize();
    clearInterval(interval);
  }
}, 100);



setTimeout(function() {
  elemento.css("width", "300px");
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="teste" style="width: 200px;height:200px;background-color: red;">
  <div>

score 0 · Answer 2

0

[UPDATED] JavaScript:

$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});

Example: link

09.12.2014 / 15:17

score 0 · Answer 3

Hello,

You can also find out when you resize with CSS3.

@media only screen and (min-width: 4800px) and (max-width: 5000px) { 
  background-color:red;
}

@media only screen and (max-width: 4800px) { background-color:blue; }

score 0 · Answer 4

You can take a look at link

It triggers the resize event, however it is likely to fire only using the handlers it provides.

An example:

$( "#teste" ).resizable({ 
    resize: function(e,ui) { 
        console.log("deu resize!") 
    } 
});