How to detect DIV s dimension changed

Question

I ve the following sample html  there is a DIV which has 100  width  It contains some elements  While performing windows re-sizing  the inner elements may be re-positioned  and the dimension of the div may change  I m asking if it is possible to hook the div s dimension change event  and How to do that  I currently bind the callback function to the jQuery resize event on the target DIV  however  no console log is outputted  see below       lt html gt   lt head gt       lt script type  text javascript  language  javascript  src  http   code jquery com jquery-1 6 1 min js  gt  lt  script gt       lt script type  text javascript  language  javascript  gt                  test div   bind  resize   function                    console log  resized                         lt  script gt   lt  head gt   lt body gt       lt div id  test div  style  width  100   min-height  30px  border  1px dashed pink   gt           lt input type  button  value  button 1    gt           lt input type  button  value  button 2    gt           lt input type  button  value  button 3    gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

You can try the code in the following snippet, it covers your needs using plain javascript. (run the code snippet and click full page link to trigger the alert that the div is resized if you want to test it.).

Based on the fact that this is a setInterval of 100 milliseconds, i would dare to say that my PC did not find it too much CPU hungry. (0.1% of CPU was used as total for all opened tabs in Chrome at the time tested.). But then again this is for just one div, if you would like to do this for a large amount of elements then yes it could be very CPU hungry.

You could always use a click event to stop the div-resize sniffing anyway.

_x000D_

var width = 0; 
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized div');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);

_x000D_

<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
</div>

_x000D_

You can check the fiddle also

UPDATE

_x000D_

var width = 0; 
function myInterval() {
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);
return interval;
}
var interval = myInterval();
document.getElementById("clickMe").addEventListener( "click" , function() {
if(typeof interval!=="undefined") {
clearInterval(interval);
alert("stopped div-resize sniffing");
}
});
document.getElementById("clickMeToo").addEventListener( "click" , function() {
myInterval();
alert("started div-resize sniffing");
});

_x000D_

<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" id="clickMe" />
        <input type="button" value="button 2" id="clickMeToo" />
        <input type="button" value="button 3" />
</div>

_x000D_

Updated Fiddle

User · Answer

My jQuery plugin enables the  resize  event on all elements not just the window   https   github com dustinpoissant ResizeTriggering      myElement    resizeTriggering   on  resize   function e        Code to handle resize

User · Answer

You have to bind the resize event on the window object  not on a generic html element   You could then use this     window  resize function                   and within the callback function you can check the new width of your div calling      a-selector   width      So  the answer to your question is no  you can t bind the resize event to a div

User · Answer

The best solution would be to use the so-called Element Queries  However  they are not standard  no specification exists - and the only option is to use one of the polyfills libraries available  if you want to go this way   The idea behind element queries is to allow a certain container on the page to respond to the space that s provided to it  This will allow to write a component once and then drop it anywhere on the page  while it will adjust its contents to its current size  No matter what the Window size is  This is the first difference that we see between element queries and media queries  Everyone hopes that at some point a specification will be created that will standardize element queries  or something that achieves the same goal  and make them native  clean  simple and robust  Most people agree that Media queries are quite limited and don t help for modular design and true responsiveness   There are a few polyfills libraries that solve the problem in different ways  could be called workarounds instead of solutions though     CSS Element Queries - https   github com marcj css-element-queries BoomQueries - https   github com BoomTownROI boomqueries eq js - https   github com Snugug eq js ElementQuery - https   github com tysonmatanich elementQuery And a few more  which I m not going to list here  but you re free to search  I would not be able to say which of the currently available options is the best  You ll have to try a few and decide    I have seen other solutions to similar problems proposed  Usually they use timers or the Window viewport size under the hood  which is not a real solution  Furthermore  I think ideally this should be solved mainly in CSS  and not in javascript or html

User · Answer

You can use iframe or object using contentWindow or contentDocument on resize  Without setInterval or setTimeout  The steps    Set your element position to relative Add inside an transparent absolute hidden IFRAME Listen to IFRAME contentWindow -  onresize event   An example of HTML    lt div style  height 50px background-color red position relative border 1px solid red  gt   lt iframe style width 100  height 100  position absolute border none background-color transparent allowtransparency true gt   lt  iframe gt  This is my div  lt  div gt    The Javascript      div   width 100  height 100      div   animate  width 200  2000       object   attr       type    text html        object   on  resize onresize load onload  function        console log  ooooooooonload            iframe   0  contentWindow  on  resize  function        console log  div changed        Running Example  JsFiddle  https   jsfiddle net qq8p470d     See more    Clay - It s based on element-resize-event element-resize-event

User · Answer

I found this library to work when MarcJ s solution didn t   https   github com sdecima javascript-detect-element-resize  It s very lightweight and detects even natural resizes via CSS or simply the HTML loading rendering   Code sample  taken from the link     lt script type  text javascript  src  detect-element-resize js  gt  lt  script gt   lt script type  text javascript  gt    var resizeElement   document getElementById  resizeElement          resizeCallback   function                  do something               addResizeListener resizeElement  resizeCallback     removeResizeListener resizeElement  resizeCallback    lt  script gt

User · Answer

A new standard for this is the Resize Observer api  available in Chrome 64    x000D   x000D  function outputsize     x000D   width value   textbox offsetWidth x000D   height value   textbox offsetHeight x000D    x000D  outputsize   x000D   x000D  new ResizeObserver outputsize  observe textbox  x000D  Width   lt output id  width  gt 0 lt  output gt  lt br gt  x000D  Height   lt output id  height  gt 0 lt  output gt  lt br gt  x000D   lt textarea id  textbox  gt Resize me lt  textarea gt  lt br gt  x000D   x000D   x000D    Resize Observer  Spec  https   wicg github io ResizeObserver  Polyfills  https   github com WICG ResizeObserver issues 3  Firefox Issue  https   bugzil la 1272409  Safari Issue  http   wkb ug 157743  Current Support  http   caniuse com  feat resizeobserver

User · Answer

Only the window object generates a  resize  event   The only way I know of to do what you want to do is to run an interval timer that periodically checks the size

User · Answer

jQuery document  ready  function       function resizeMapDIVs         check the parent value     var size       map   parent   width       if   size  lt  640             and decrease       else          or increase  as necessary        resizeMapDIVs       window  resize resizeMapDIVs

User · Answer

Only Window onResize exists in the specification  but you can always utilize IFrame to generate new Window object inside your DIV   Please check this answer  There is a new little jquery plugin  that is portable and easy to use  You can always check the source code to see how it s done    lt  --  1  include plugin script in a page -- gt   lt script src   src jquery-element-onresize js  gt  lt  script gt       2  use the detectResizing plugin to monitor changes to the element s size   monitoredElement detectResizing   onResize  monitoredElement onResize          3  write a function to react on changes  function monitoredElement onResize                logic here

User · Answer

Using Clay js  https   github com zzarcon clay  it s quite simple to detect changes on element size   var el   new Clay   element     el on  resize   function size        console log size height  size width

User · Answer

ResizeSensor js is part of a huge library  but I reduced its functionality to THIS   function ResizeSensor element  callback        let zIndex   parseInt getComputedStyle element        if isNaN zIndex     zIndex   0         zIndex--       let expand   document createElement  div        expand style position    absolute       expand style left    0px       expand style top    0px       expand style right    0px       expand style bottom    0px       expand style overflow    hidden       expand style zIndex   zIndex      expand style visibility    hidden        let expandChild   document createElement  div        expandChild style position    absolute       expandChild style left    0px       expandChild style top    0px       expandChild style width    10000000px       expandChild style height    10000000px       expand appendChild expandChild        let shrink   document createElement  div        shrink style position    absolute       shrink style left    0px       shrink style top    0px       shrink style right    0px       shrink style bottom    0px       shrink style overflow    hidden       shrink style zIndex   zIndex      shrink style visibility    hidden        let shrinkChild   document createElement  div        shrinkChild style position    absolute       shrinkChild style left    0px       shrinkChild style top    0px       shrinkChild style width    200        shrinkChild style height    200        shrink appendChild shrinkChild        element appendChild expand       element appendChild shrink        function setScroll                 expand scrollLeft   10000000          expand scrollTop   10000000           shrink scrollLeft   10000000          shrink scrollTop   10000000             setScroll         let size   element getBoundingClientRect         let currentWidth   size width      let currentHeight   size height       let onScroll   function                 let size   element getBoundingClientRect             let newWidth   size width          let newHeight   size height           if newWidth    currentWidth    newHeight    currentHeight                        currentWidth   newWidth              currentHeight   newHeight               callback                       setScroll                expand addEventListener  scroll   onScroll       shrink addEventListener  scroll   onScroll        How to use it   let container   document querySelector   container    new ResizeSensor container  function         console log  dimension changed    container clientWidth  container clientHeight

User · Answer

expanding on this answer by  gman  here s a function that allows multiple per element callbacks  exploding the width and height into a quasi event object  see embedded demo that works live here on stack overflow   you may need to resize the main browser drastically for it to trigger   x000D   x000D  function elementResizeWatcher element  callback             var         resolve function element              return  typeof element    string                        document                                         indexOf element charAt 0    lt  0    getElementById     querySelector                           element                       element                      observer          watched                checkForElementChanges   function  data              var w data el offsetWidth h data el offsetHeight            if               data offsetWidth      w                data offsetHeight     h                           data offsetWidth    w              data offsetHeight   h              data cb                 target   data el                width    w                height   h                                                 checkForChanges function              watched forEach checkForElementChanges                      started false          self                start  function                      if   started                            Listen to the window resize event                     window addEventListener  resize   checkForChanges                           Listen to the element being checked for width and height changes                     observer   new MutationObserver checkForChanges                       observer observe document body                          attributes  true                        childList  true                        characterData  true                        subtree  true                                              started true                                          stop   function                       if  started                        window removeEventListener  resize   checkForChanges                       observer disconnect                        started   false                                               addListener   function  element callback                   if  typeof callback    function                     return                  var el   resolve element                  if  typeof el    object                      watched push                       el             el                      offsetWidth    el offsetWidth                      offsetHeight   el offsetHeight                      cb             callback                                                                 removeListener   function  element callback                 var               el   resolve element                watched   watched filter function data                  return    data el   el   amp  amp   data cb   callback                                                      self addListener element callback            self start             return self           var watcher   elementResizeWatcher   resize me on stack overflow   function e     e target innerHTML  i am   e width  px amp nbsp x amp nbsp   e height  px        watcher addListener   resize metoo  function e      e target innerHTML  and i am   e width  px amp nbsp x amp nbsp   e height  px        var mainsize info   document getElementById  mainsize     watcher addListener document body function e      mainsize info innerHTML e width  px amp nbsp x amp nbsp   e height  px       x000D   resize me on stack overflow  background-color lime      resize metoo   background-color yellow  font-size 36pt  width 50     x000D   lt p gt  resize the main browser window   lt span id  mainsize  gt  lt span gt   lt  p gt   lt p id  resize me on stack overflow  gt     hey  resize me   lt  p gt     lt p class  resize metoo  gt     resize me too   lt  p gt  x000D   x000D   x000D

User · Answer

Amazingly as old as this issue is  this is still a problem in most browsers   As others have said  Chrome 64  now ships with Resize Observes natively  however  the spec is still being fine tuned and Chrome is now currently  as of 2019-01-29  behind the latest edition of the specification   I ve seen a couple of good ResizeObserver polyfills out in the wild  however  some do not follow the specification that closely and others have some calculation issues   I was in desperate need of this behaviour to create some responsive web components that could be used in any application  To make them work nicely they need to know their dimensions at all times  so ResizeObservers sounded ideal and I decided to create a polyfill that followed the spec as closely as possible   Repo  https   github com juggle resize-observer  Demo  https   codesandbox io s myqzvpmmy9

User · Answer

This is a really old question  but I figured I d post my solution to this   I tried to use ResizeSensor since everyone seemed to have a pretty big crush on it  After implementing though  I realized that under the hood the Element Query requires the element in question to have position relative or absolute applied to it  which didn t work for my situation   I ended up handling this with an Rxjs interval instead of a straight setTimeout or requestAnimationFrame like previous implementations    What s nice about the observable flavor of an interval is that you get to modify the stream however any other observable can be handled  For me  a basic implementation was enough  but you could go crazy and do all sorts of merges  etc   In the below example  I m tracking the inner  green  div s width changes  It has a width set to 50   but a max-width of 200px  Dragging the slider affects the wrapper  gray  div s width  You can see that the observable only fires when the inner div s width changes  which only happens if the outer div s width is smaller than 400px    x000D   x000D  const   interval     rxjs  x000D  const   distinctUntilChanged  map  filter     rxjs operators  x000D   x000D   x000D  const wrapper   document getElementById  my-wrapper    x000D  const input   document getElementById  width-input    x000D   x000D   x000D   x000D   x000D  function subscribeToResize     x000D    const timer   interval 100   x000D    const myDiv   document getElementById  my-div    x000D    const widthElement   document getElementById  width    x000D    const isMax   document getElementById  is-max    x000D     x000D       x000D      NOTE  This is the important bit here  x000D       x000D    timer x000D       pipe  x000D        map      gt  myDiv   Math round myDiv getBoundingClientRect   width    0   x000D        distinctUntilChanged    x000D           adding a takeUntil    here as well would allow cleanup when the component is destroyed x000D        x000D         subscribe  width    gt            x000D          widthElement innerHTML   width  x000D          isMax innerHTML   width     200    Max width     50  width   x000D   x000D            x000D    x000D   x000D  function defineRange     x000D    input min   200  x000D    input max   window innerWidth  x000D    input step   10  x000D    input value   input max - 50  x000D    x000D   x000D  function bindInputToWrapper     x000D    input addEventListener  input    event    gt    x000D      wrapper style width      event target value px   x000D        x000D    x000D   x000D  defineRange    x000D  subscribeToResize    x000D  bindInputToWrapper    x000D   inner   x000D    width  50   x000D    max-width  200px  x000D    x000D   x000D   x000D   x000D   x000D     Aesthetic styles only    x000D   x000D   inner   x000D    background   16a085  x000D    x000D   x000D   wrapper   x000D    background   ecf0f1  x000D    color  white  x000D    margin-top  24px  x000D    x000D   x000D   content   x000D    padding  12px  x000D    x000D   x000D  body   x000D     x000D    font-family  sans-serif  x000D    font-weight  bold  x000D    x000D   lt script src  https   unpkg com rxjs bundles rxjs umd min js  gt  lt  script gt  x000D   x000D   lt h1 gt Resize Browser width lt  h1 gt  x000D   x000D   lt label for  width-input  gt Adjust the width of the wrapper element lt  label gt  x000D   lt div gt  x000D     lt input type  range  id  width-input  gt  x000D   lt  div gt  x000D   x000D   lt div id  my-wrapper  class  wrapper  gt  x000D     lt div id  my-div  class  inner  gt  x000D       lt div class  content  gt  x000D        Width   lt span id  width  gt  lt  span gt px x000D         lt div id  is-max  gt  lt  div gt    x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

using Bharat Patil answer simply return false inside the your bind callback to prevent maximum stack error see example below       test div   bind  resize   function       console log  resized       return false

User · Answer

This blog post helped me efficiently detect size changes to DOM elements   http   www backalleycoder com 2013 03 18 cross-browser-event-based-element-resize-detection   How to use this code     AppConfig addResizeListener document getElementById  id    function          Your code to execute on resize        Packaged code used by the example     var AppConfig   AppConfig        AppConfig ResizeListener    function          var attachEvent   document attachEvent      var isIE   navigator userAgent match  Trident        var requestFrame    function              var raf   window requestAnimationFrame    window mozRequestAnimationFrame    window webkitRequestAnimationFrame                function  fn    return window setTimeout fn  20              return function  fn    return raf fn                     var cancelFrame    function              var cancel   window cancelAnimationFrame    window mozCancelAnimationFrame    window webkitCancelAnimationFrame                   window clearTimeout          return function  id    return cancel id                     function resizeListener e            var win   e target    e srcElement          if  win   resizeRAF    cancelFrame win   resizeRAF             win   resizeRAF     requestFrame function                  var trigger   win   resizeTrigger                trigger   resizeListeners   forEach function  fn                    fn call trigger  e                                          function objectLoad e            this contentDocument defaultView   resizeTrigger     this   resizeElement            this contentDocument defaultView addEventListener  resize   resizeListener              AppConfig addResizeListener   function  element  fn            if   element   resizeListeners                  element   resizeListeners                     if  attachEvent                    element   resizeTrigger     element                  element attachEvent  onresize   resizeListener                 else                   if  getComputedStyle element  position      static   element style position    relative                   var obj   element   resizeTrigger     document createElement  object                    obj setAttribute  style    display  block  position  absolute  top  0  left  0  height  100   width  100   overflow  hidden  pointer-events  none  z-index  -1                     obj   resizeElement     element                  obj onload   objectLoad                  obj type    text html                   if  isIE  element appendChild obj                   obj data    about blank                   if   isIE  element appendChild obj                                   element   resizeListeners   push fn               AppConfig removeResizeListener   function  element  fn            element   resizeListeners   splice element   resizeListeners   indexOf fn   1           if   element   resizeListeners   length                if  attachEvent  element detachEvent  onresize   resizeListener               else                   element   resizeTrigger   contentDocument defaultView removeEventListener  resize   resizeListener                   element   resizeTrigger      element removeChild element   resizeTrigger                                           Note   AppConfig is a namespace object I use for organizing reusable functions   Feel free to search and replace the name with anything you would like

User · Answer

There is a very efficient method to determine if a element s size has been changed   http   marcj github io css-element-queries   This library has a class ResizeSensor which can be used for resize detection   It uses an event-based approach  so it s damn fast and doesn t waste CPU time   Example   new ResizeSensor jQuery   divId    function         console log  content dimension changed          Please do not use the jQuery onresize plugin as it uses setTimeout   in combination with reading the DOM clientHeight clientWidth properties in a loop to check for changes  This is incredible slow and inaccurate since it causes layout thrashing   Disclosure  I am directly associated with this library

User · Answer

i thought it couldn t be done but then i thought about it  you can manually resize a div via style  resize  both   in order to do that you ave to click on it so added an onclick function to check  element s height and width and it worked  With only 5 lines of pure javascript  sure it could be even shorter  http   codepen io anon pen eNyyVN   lt div id  box  style                   height 200px                   width 640px                  background-color  FF0066                  resize  both                  overflow  auto                    onclick  myFunction    gt       lt p id  sizeTXT  style                   font-size  50px   gt         WxH      lt  p gt       lt  div gt    lt p gt This my example demonstrates how to run a resize check on click for resizable div  lt  p gt    lt p gt Try to resize the box  lt  p gt     lt script gt  function myFunction     var boxheight   document getElementById  box   offsetHeight  var boxhwidth   document getElementById  box   offsetWidth  var txt   boxhwidth   x  boxheight  document getElementById  sizeTXT   innerHTML   txt     lt  script gt

User · Answer

Here is a simplified version of the solution by  nkron  applicable to a single element  instead of an array of elements in  nkron s answer  complexity I did not need    function onResizeElem element  callback             Save the element we are watching   onResizeElem watchedElementData         element  element      offsetWidth  element offsetWidth      offsetHeight  element offsetHeight      callback  callback         onResizeElem checkForChanges   function         const data   onResizeElem watchedElementData      if  data element offsetWidth     data offsetWidth    data element offsetHeight     data offsetHeight          data offsetWidth   data element offsetWidth        data offsetHeight   data element offsetHeight        data callback                     Listen to the window resize event   window addEventListener  resize   onResizeElem checkForChanges         Listen to the element being checked for width and height changes   onResizeElem observer   new MutationObserver onResizeElem checkForChanges     onResizeElem observer observe document body        attributes  true      childList  true      characterData  true      subtree  true           The event listener and observer can be removed by   window removeEventListener  resize   onResizeElem checkForChanges   onResizeElem observer disconnect

User · Answer

x000D   x000D  var div   document getElementById  div    x000D  div addEventListener  resize    event    gt  console log event detail    x000D   x000D  function checkResize  mutations    x000D      var el   mutations 0  target  x000D      var w   el clientWidth  x000D      var h   el clientHeight  x000D       x000D      var isChange   mutations x000D         map  m    gt  m oldValue       x000D         some  prev    gt  prev indexOf  width      w    px      -1    prev indexOf  height      h    px      -1   x000D   x000D      if   isChange  x000D        return  x000D   x000D      var event   new CustomEvent  resize    detail   width  w  height  h     x000D      el dispatchEvent event   x000D    x000D   x000D  var observer   new MutationObserver checkResize    x000D  observer observe div   attributes  true  attributeOldValue  true  attributeFilter    style      x000D   div  width  100px  border  1px solid  bbb  resize  both  overflow  hidden   x000D   lt div id    div  gt DIV lt  div gt  x000D   x000D   x000D

User · Answer

I DO NOT recommend setTimeout   hack as it slows down the performance  Instead  you can use  DOM mutation observers for listening to Div size change   JS   var observer   new MutationObserver function mutations        console log  size changed             var target   document querySelector   mydiv      observer observe target        attributes  true         HTML    lt div class  mydiv  gt   lt  div gt    Here s the fiddle Try to change the div size     You can further wrap your method in the debounce method to improve efficiency  debounce will trigger your method every x milliseconds instead of triggering every millisecond the DIV is being resized

User · Answer

This is pretty much an exact copy of the top answer  but instead of a link  it s just the part of the code that matters  translated to be IMO more readable and easier to understand   A few other small changes include using cloneNode    and not putting html into a js string   Small stuff  but you can copy and paste this as is and it will work   The way it works is by making two invisible divs fill the element you re watching  and then putting a trigger in each  and setting a scroll position that will lead to triggering a scroll change if the size changes   All real credit goes to Marc J  but if you re just looking for the relevant code  here it is       window El           El resizeSensorNode   undefined      El initResizeNode   function             var fillParent    display  block  position  absolute  left  0  top  0  right  0  bottom  0  overflow  hidden  z-index  -1  visibility  hidden            var triggerStyle    position  absolute  left  0  top  0  transition  0s             var resizeSensor   El resizeSensorNode   document createElement  resizeSensor            resizeSensor style   fillParent           var expandSensor   document createElement  div            expandSensor style   fillParent          resizeSensor appendChild expandSensor            var trigger   document createElement  div            trigger style   triggerStyle          expandSensor appendChild trigger            var shrinkSensor   expandSensor cloneNode true           shrinkSensor firstChild style   triggerStyle     width  200   height  200            resizeSensor appendChild shrinkSensor               El onSizeChange   function domNode  fn            if   domNode  return          if  domNode resizeListeners                domNode resizeListeners push fn               return                     domNode resizeListeners               domNode resizeListeners push fn            if El resizeSensorNode    undefined              El initResizeNode             domNode resizeSensor   El resizeSensorNode cloneNode true           domNode appendChild domNode resizeSensor            var expand   domNode resizeSensor firstChild          var expandTrigger   expand firstChild          var shrink   domNode resizeSensor childNodes 1            var reset   function                 expandTrigger style width    100000px               expandTrigger style height    100000px                expand scrollLeft   100000              expand scrollTop   100000               shrink scrollLeft   100000              shrink scrollTop   100000                      reset             var hasChanged  frameRequest  newWidth  newHeight          var lastWidth   domNode offsetWidth          var lastHeight   domNode offsetHeight            var onResized   function                 frameRequest   undefined               if   hasChanged  return               lastWidth   newWidth              lastHeight   newHeight               var listeners   domNode resizeListeners              for var i   0  listeners  amp  amp  i  lt  listeners length  i                     listeners i                         var onScroll   function                 newWidth   domNode offsetWidth              newHeight   domNode offsetHeight              hasChanged   newWidth    lastWidth    newHeight    lastHeight               if  hasChanged  amp  amp   frameRequest                    frameRequest   requestAnimationFrame onResized                              reset                         expand addEventListener  scroll   onScroll           shrink addEventListener  scroll   onScroll

User · Answer

Pure Javascript solution  but works only if the element is resized with the css resize button    store element size with offsetWidth and offsetHeight  add an onclick event listener on this element  when triggered  compare curent offsetWidth and offsetHeight with stored values  and if different  do what you want and update these values

User · Answer

Long term  you will be able to use the ResizeObserver   new ResizeObserver callback  observe element     Unfortunately it is not currently supported by default in many browsers   In the mean time  you can use function like the following   Since  the majority of element size changes will come from the window resizing or from changing something in the DOM   You can listen to window resizing with the window s resize event and you can listen to DOM changes using MutationObserver   Here s an example of a function that will call you back when the size of the provided element changes as a result of either of those events   var onResize   function element  callback      if   onResize watchedElementData           First time we are called  create a list of watched elements        and hook up the event listeners      onResize watchedElementData            var checkForChanges   function           onResize watchedElementData forEach function data            if  data element offsetWidth     data offsetWidth                data element offsetHeight     data offsetHeight              data offsetWidth   data element offsetWidth            data offsetHeight   data element offsetHeight            data callback                                       Listen to the window s size changes     window addEventListener  resize   checkForChanges           Listen to changes on the elements in the page that affect layout      var observer   new MutationObserver checkForChanges       observer observe document body           attributes  true        childList  true        characterData  true        subtree  true                    Save the element we are watching   onResize watchedElementData push       element  element      offsetWidth  element offsetWidth      offsetHeight  element offsetHeight      callback  callback

User · Answer

Take a look at this http   benalman com code projects jquery-resize examples resize   It has various examples  Try resizing your window and see how elements inside container elements adjusted   Example with js fiddle to explain how to get it work  Take a look at this fiddle http   jsfiddle net sgsqJ 4   In that resize   event is bound to an elements having class  test  and also to the window object and in resize callback of window object     test   resize   is called   e g       test div   bind  resize   function                console log  resized           window  resize function           test div   resize

[javascript] How to detect DIV's dimension changed?

Examples related to javascript

Examples related to jquery

Examples related to html