jQuery event to detect when element position changes

Question

I would like to know if there is a jQuery event that I can use to determine when a particular DIV's top property has changed.

For instance, I have invisible content above a DIV. When that content becomes visible, the DIV is shifted down. I would like to capture that event and then use the offset() function to get the X/Y coordinates.

Solution 1

The easy answer is that there are no events in the DOM for detecting layout updates.

You have a couple options the way I see it:

1. Poll, nasty but it may work depending on your update frequency requirements.

2. Tap into whatever event causes the invisible DIV to change size and do whatever you need to do in that handler

---

I shall correct myself.

I took a look at the DOM and noticed the DOMAttrModified event and found this JQuery Plug-In that you might be able to leverage to do what you want.

As the article mentions, it works great in IE and Firefox but seems to have problems in WebKit.

Solution 2

I thiiink you should be able to do:

$(document).ready( function (){
  $("#mydiv").bind("movestart", function (){ ...remember start position... });
  $("#mydiv").bind("moveend", function (){ ...calculate offsets etc... });
});