6

Gostaria de saber se existe algum evento que capte mudanças de tamanho de um elemento HTML. Por exemplo, uma div com 5000px de altura passa a ter 4800px e o onresize() do Javascript não dispara.

Existe algum evento que capture isso?

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

Notem que a altura do documento é alterada mas o evento de resize não dispara.

Agradeço desde já.

4
  • Como assim o onresize não funciona? Pode postar o que já testou?
    – Sergio
    Commented 9/12/2014 às 14:56
  • 1
    Então é que quero capturar a mudança de altura do documento e não da janela.... Postei o codigo de teste no corpo da pergunta. Valeu pela ajuda. Commented 9/12/2014 às 16:18
  • Douglas efectivamente só o window é que gera esse evento resize. Para capturar mudanças em elementos tem de usar setInterval e isso pode atrasar muito a performance. Então a minha pergunta é: o que quer fazer mesmo, o que faz essa mudança de tamanho acontecer? Acho que pode estar a tentar resolver o problema no sitio errado.
    – Sergio
    Commented 9/12/2014 às 17:50
  • 2
    benalman.com/projects/jquery-resize-plugin
    – OnoSendai
    Commented 8/01/2015 às 16:43

4 Respostas 4

1

um 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>
<div id="teste" style="width: 200px;height:200px;background-color: red;">
  <div>

1
  • Neste exemplo, o quando o elemento for alterado, o método onResize será chamado, e o "listener" será limpo.
    – ohrlando
    Commented 11/02/2015 às 16:38
0

[ATUALIZADO] JavaScript:

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

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

Exemplo: http://jsfiddle.net/sgsqJ/4/

3
  • E ai cara blz? Então não é isso que preciso(altera a estilo do elemento), preciso capturar a mudança de tamanho do documento( document.body.clientHeight ), mas valew Commented 9/12/2014 às 14:20
  • Deculpa! Atualizei!
    – Lollipop
    Commented 9/12/2014 às 14:22
  • Valeu, mas é que o resize não captura a mudança de altura do documento( lembrando estou falando de documento não janela), mas valeu *Adicionei o codigo de teste na pergunta se quiser dar uma olhada Commented 9/12/2014 às 16:16
0

Olá,

Também é possível descobrir quando muda o tamanho com 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; }
1
  • 1
    Valeu cara mas com media queries não tenho callback por isso que necessito do javascript.... valeu Commented 9/12/2014 às 16:14
0

Pode dar uma olhada em http://api.jqueryui.com/resizable/

Ele faz disparar o evento resize, porém é provável que ele dispare somente utilizando os handlers que ele disponibiliza.

um exemplo:

$( "#teste" ).resizable({ 
    resize: function(e,ui) { 
        console.log("deu resize!") 
    } 
});
3
  • 1
    Poderia dar um exemplo com o código fonte?
    – rray
    Commented 9/02/2015 às 18:49
  • $( "#teste" ).resizable({ resize: function(e,ui) { console.log("deu resize!") } });
    – ohrlando
    Commented 9/02/2015 às 19:53
  • mas infelizmente o resize é disparado quando você dá um drag nos handlers. ou seja, se alterar o style width, não será disparado.
    – ohrlando
    Commented 9/02/2015 às 19:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .