jQuery update console log when div height changes

I am wanting to trigger a console message whenever a divs height changes, so if I make the jsfiddle result window smaller I am expecting the console log to display the new height of the container div.

http://jsfiddle.net/hm7tsz84/1/

jQuery('.container').bind('resize', function(){
    console.log( 'Height changed to' + jQuery(this).height() );
});
.container{
  max-width:300px;
  background:tan;
  padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet accumsan pharetra. Ut in ligula non felis ullamcorper pulvinar efficitur ut lacus. Praesent porta, tellus a rutrum molestie, tellus erat ullamcorper felis, et iaculis tellus est sit amet urna. Donec vulputate lobortis ornare. Curabitur tortor erat, euismod et varius ac, tempus eu libero. In accumsan arcu vitae tellus fermentum mattis id eu lorem. Nulla eget iaculis nibh

</div>

Why is this not happening in my example?

Answers 1

  • First of all event resize fired when document view is resized and binds to top element of DOM-tree. More information you can find at MDN Second. A lot of solutions of similar problem you can find on this site :) Here is an example


Related Articles