jquery - How to determine if a div changes its height or any css attribute?

Question

How can I trigger an event when a div changes its height or any css attribute?

I have a div with id = mainContent. I want jquery to automatically trigger an event when it changes its height. I did something like this:

$("#mainContent").change('height', function() {
    $("#separator").css('height', $("#mainContent").height());
});

I know its wrong.

Here's my whole code (I pasted all of it because I can't get into jsfiddle for some reason I don't know):

$(document).ready(function() {
 $("#separator").css('height', $("body").height());
});

$(function() {
 $("#btnSample1").click(function() {
  $("#mainContent").css('height', '400px');
  $("#mainContent").css('width', '600px');
  $("#mainContent").css('background-color', '#F0F0F0');
 });

 $("#btnSample2").click(function() {
  $("#mainContent").css('height', '1600px');
  $("#mainContent").css('width', '700px');
  $("#mainContent").css('background-color', '#F0F0F0');     
 });

 $("#mainContent").change('height', function() {
  $("#separator").css('height', $("#mainContent").height());
 });
});

html, body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

#separator {
 border-right: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width: 100%;">
 <tr>
  <td valign="top" style="width: 19%;"> 
   <table id="mainMenu">
    <tr><td><input id="btnSample1" type="button" value="Sample 1"  /></td></tr>
    <tr><td><input id="btnSample2" type="button" value="Sample 2"  /></td></tr>
   </table>
  </td>

  <td valign="top" style="width: 1%;" >
   <div id="separator"></div> 
  </td>

  <td valign="top" style="width: 80%;">
   <div id="mainContent"></div>
  </td>
 </tr>
</table>

I am trying to adjust the height of the div id=separator based on the height of mainContent whenever the height of mainContent changes.

PS: In this case I know I can use the button event to do this but I want the div to trigger the event when the height is changed.

Answer 1

First, There is no such css-changes event out of the box, but you can create one by your own, as onchange is for :input elements only. not for css changes.

There are two ways to track css changes.

1. Examine the DOM element for css changes every x time(500 milliseconds in the example).
2. Trigger an event when you change the element css.
3. Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.

First way:

var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
    if ($element.css('height') != lastHeight)
    {
        alert('xxx');
        lastHeight = $element.css('height'); 
    }

    setTimeout(checkForChanges, 500);
}

Second way:

$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


$("#btnSample1").click(function() {
    $("#mainContent").css('height', '400px');
    $("#mainContent").trigger('heightChange'); //<====
    ...
});    

If you control the css changes, the second option is a lot more elegant and efficient way of doing it.

Documentations:

• bind: Description: Attach a handler to an event for the elements.
• trigger: Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

Answer 2

Please don't use techniques described in other answers here. They are either not working with css3 animations size changes, 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');
});

Disclaimer: I wrote this library

Answer 3

For future sake I'll post this. If you do not need to support < IE11 then you should use MutationObserver.

Here is a link to the caniuse js MutationObserver

Simple usage with powerful results.

    var observer = new MutationObserver(function (mutations) {
        //your action here
    });

    //set up your configuration
    //this will watch to see if you insert or remove any children
    var config = { subtree: true, childList: true };

    //start observing
    observer.observe(elementTarget, config);

When you don't need to observe any longer just disconnect.

    observer.disconnect();

Check out the MDN documentation for more information

Answer 4

Another simple example.

For this sample we can use 100x100 DIV-box:

<div id="box" style="width: 100px; height: 100px; border: solid 1px red;">
 // Red box contents here...
</div>

And small jQuery trick:

<script type="text/javascript">
  jQuery("#box").bind("resize", function() {
    alert("Box was resized from 100x100 to 200x200");
  });
  jQuery("#box").width(200).height(200).trigger("resize");
</script>

Steps:

1. We created DIV block element for resizing operatios
2. Add simple JavaScript code with:
   • jQuery bind
   • jQuery resizer with trigger action "resize" - trigger is most important thing in my example
3. After resize you can check the browser alert information

That's all. ;-)

Answer 5

As far as regards the height or any other dimension parameter, you can use the ResizeObserver interface. First, you get your HTML element:

const divElem = document.querySelector('#mainContent');

The element type is not restricted to DIVs, it can be anything. Then, you create an instance of the ResizeObserver interface:

let myObserver = new ResizeObserver(entries => {
  console.log("Height changed. New height: "+$("#mainContent").height());
});

Finally, you call the observe() method, which starts the specified element:

myObserver.observe(divElem);

Each time the element will be resized, the observe() method will be triggered.

Please note: the ResizeObserver interface does not work with Internet Explorer.

Other valuable answers are here: How to detect DIV's dimension changed?