0

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?

fightstarr20
  • 11,682
  • 40
  • 154
  • 278

2 Answers2

2

floating layout changes or changes that don't come from jQuery land. You can use a resize-detector, a event-based approach, that doesn't waste your CPU time.

https://github.com/marcj/css-element-queries

It contains a ResizeSensor class you can use for that purpose.

new ResizeSensor(jQuery('#mainContent'), function(){ 
    console.log('main content dimension changed');
});
Ajith K P
  • 398
  • 3
  • 12
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

Vasyl Moskalov
  • 4,242
  • 3
  • 20
  • 28