How to know when an DOM element moves or is resized

I'd like to know if there is a DOM event to listen for that tells me when a DOM element moves is repositioned or is resized on the page. I am not talking about an elements being drag/dropped. An example is if a have a list of three items on a page, and I use JS to remove one of the top two list items from the page (or hide it or whatever), I'd like to attach a handler to run when the third list item gets moved up in the page.

I am using jQuery, so plain javascript or jQuery answers are acceptable.

Maybe there are no move/position/resize events at the element level, so if there is a page/doc level event that will tell me that the page was repainted and I can check if I need to call a function again?

Background

I put a transparent div over an element while a webservice call is made to delete that element. Since I need to absolutely position that overlay div, I want it to track the element that it covers initially. In effect anchoring it to the base element.

Answers


You can't get a callback for element movement/resizing in general; you would have to keep constantly checking the dimensions in an interval poller, which would make it a bit less responsive. You could improve this by calling the checker on a window resize event too (and scroll if overflow or fixed positioning is involved. You could also add DOM Mutation Event listeners to get informed when elements are removed from the document tree, but this doesn't work in all browsers.

Can't you do an overlay with plain CSS? eg. put position: relative on the element to be obscured, then add the overlay inside it, with the following?

position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;

I don't think this solution would be relevant after so long, but there's an excellent cross-browser solution based on the overflow and underflow events presented here

To enable our resize listening magic, we inject an object element into the target element, set a list of special styles to hide it from view, and monitor it for resize – it acts as a trigger for alerting us when the target element parent is resized.

The <object> element's content has a native resize event, just like a window.


There's a (Ben Alman) plugin for that.TM

This is a good plugin, although I suggest using it sparingly (i.e., not on too many elements), so as to keep the amount of polling down.


Need Your Help

Detecting if a browser is in full screen mode

javascript dom browser fullscreen

Is there any way of reliably detecting if a browser is running in full screen mode? I'm pretty sure there isn't any browser API I can query, but has anyone worked it out by inspecting and comparing

Spring Explorer not showing beans from bean definition file

eclipse spring sts-springsourcetoolsuite

I just downloaded the Springsource Tool Suite, and I created a simple bean configuration file called myDefinition.xml and placed it in the root directory of the Spring Project. However, the Spring