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

Question

I wanna know how to 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      lt html gt   lt head gt   lt style type  text css  gt  html  body    width  100    height  100    margin  0   padding  0      separator    border-right  1px solid black     lt  style gt    lt script type  text javascript  src  jquery1 6 4min js  gt   lt  script gt   lt script type  text javascript  gt    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               lt  script gt   lt  head gt   lt body gt   lt table style  width  100    gt    lt tr gt     lt td valign  top  style  width  19    gt       lt table id  mainMenu  gt       lt tr gt  lt td gt  lt input id  btnSample1  type  button  value  Sample 1     gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt  lt input id  btnSample2  type  button  value  Sample 2     gt  lt  td gt  lt  tr gt      lt  table gt     lt  td gt      lt td valign  top  style  width  1     gt      lt div id  separator  gt  lt  div gt      lt  td gt      lt td valign  top  style  width  80    gt      lt div id  mainContent  gt  lt  div gt     lt  td gt    lt  tr gt   lt  table gt   lt  body gt   lt  html gt    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  Please help  Thanks in advance

User · Answer

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

User · Answer

For future sake I ll post this  If you do not need to support  lt  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

User · Answer

Another simple example   For this sample we can use 100x100 DIV-box    lt div id  box  style  width  100px  height  100px  border  solid 1px red   gt      Red box contents here     lt  div gt    And small jQuery trick    lt script type  text javascript  gt    jQuery   box   bind  resize   function         alert  Box was resized from 100x100 to 200x200            jQuery   box   width 200  height 200  trigger  resize     lt  script gt    Steps    We created DIV block element for resizing operatios Add simple JavaScript code with    jQuery bind jQuery resizer with trigger action  resize  - trigger is most important thing in my example  After resize you can check the browser alert information   That s all   -

User · Answer

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       Examine the DOM element for css changes every x time 500 milliseconds in the example      Trigger an event when you change the element css  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       lt                        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

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

Examples related to javascript

Examples related to jquery

Examples related to css