How to know when an DOM element moves or is resized

Question

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.

Answer 1

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.

Answer 2

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 position: absolute; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5;?

Answer 3

Example below from: http://api.jquery.com/resize/

for example:

var $j = jQuery.noConflict();
$j(window).resize(function() {
  $j('#log').append('<div>Handler for .resize() called.</div>');
});

Instead $j(window) you able to use any available selector, so $j(#yourIDselector)

---

And example below from: http://api.jquery.com/scroll/

for example:

$('#target').scroll(function() {
  $('#log').append('<div>Handler for .scroll() called.</div>');
});

Regards,
swift