In a HTML page, an element can be repositioned for lots of reasons - style changes (margin, padding, height, etc) to the element, insertion or removal of other elements, or style changes to other elements.
I need to ensure that a jQuery dialog is always positioned next to an anchor, so if the anchor moves so will the dialog. However, I do not control the page that the dialog is displaying on (I inject some JS dynamically). I thought that I could observe changes to the offsetTop property of the element (and all it's parent elements) with a MutationObserver, but offsetTop changes do not seem to raise mutation events.
Can someone confirm that offsetTop changes will not raise a mutation event, or show me how I can watch the offset top?
Alternatively, if there is some other technique to ensure that a dialog stays with it's anchor, I'm all ears - but please be aware of the constraint that I don't control the page itself, only the dialog :)
FIDDLE:
In the following fiddle, clicking the "Margin" button modifies the margin-top of the anchor element, causing the style attribute to change, this triggering a reposition. However, clicking the other buttons does not cause a reposition, even though the offsetTop attribute has changed. I need the other two buttons to cause the position() function to be called.
http://jsfiddle.net/ustmssx7/2/
CONSTRAINTS
I do not control the HTML or the Javascript - my JS get's injected into someone else's page, so I am very limited in what I can do.
FALLBACK
My fallback solution is to poll the window.anchor.offsetTop every 100ms or so, and reposition if it changes. However, polling sucks, so if I can react to events instead that would be much better.
offsetTop cannot be observed with MutationObserver because only HTML structure changes can be observed. So any HTML data visible in the actual HTML of the page.
For your example, what you actually want is to observe the entire structure of the page, since any number of things can affect the position of the popup, and on any change to the page at all, you'll need to re-position your popup. Keep in mind though that there are still ways to modify the rendering state of the page without modifying the HTML of the page, like CSS animations and hover effects and such. Those would not be solvable with this type of solution.