Is there an event that captures mundanes the size of an HTML element?

Asked

Viewed 1,452 times

6

I wonder if there is an event that captures changes in the size of an HTML element. For example, a div with 5000px height 4800px and the onresize() javascript 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 document height is changed but the event of resize does not fire.

Thank you in advance.

javascript html css

  • How so the onresize doesn’t work? You can post what you have tested?

  • 1

    So I want to capture the document height change and not the window.... I posted the test code in the question body. Thanks for the help.

  • Douglas actually only the window is what generates this event resize. To capture changes in elements you have to use setInterval and that can delay the performance a lot. So my question is: what do you really want to do, what makes this size change happen? I think you might be trying to solve the problem in the wrong place.

  • 2

    http://benalman.com/projects/jquery-resize-plugin/

4 answers

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

  • In this example, when the element is changed, the onResize method will be called, and the "Listener" will be cleaned.

0

[UPDATED] Javascript:

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

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

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

  • What’s up, my man? So that’s not what I need (changes the style of the element), I need to capture the size change of the document( Document.body.clientHeight ), but Valew

  • Deculpa! I updated!

  • Thanks, but resize does not capture the height change of the document( remembering I’m talking about document not window), but worth *I added the test code in the question if you want to take a look

0

Hello,

You can also find out when the size changes 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; }
  • 1

    Thanks man but with media queries I do not have callback so I need javascript.... thanks

0

You can take a look at http://api.jqueryui.com/resizable/

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

an example:

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

    Could you give an example with the source code?

  • $( "#test" ).resizable({ resize: Function(e,ui) { console.log("deu resize!") } });

  • but unfortunately resize is triggered when you drag handlers. , that is, if you change the style width, it will not be triggered.

Browser other questions tagged javascript html css

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