Q:

Watching the offset of an element in the dom, when a different element changes?

I'm trying to find a way to monitor/watch the offset/width/height on a DOM element to catch any changes. However, I need also to catch any changes to an element if another element either moved the watched element or resized it. E.g. a DOM element above the watched object grew, and took up more space, resulting in the watched elements offset getting moved.
Example to demonstrate what I need to watch/monitor
I have implemented it using a timer, but a callback/watcher would be a lot better.
I've found several ways to watch changes on a particular element, but that would involve monitoring the entire DOM for changes, which isn't ideal.
Solutions that show how to monitor/watch changes on a particular item wont help, as they rely on the attributes/CSS changing on that particular item.
Examples of what's not working:
jQuery CSS Property Monitoring
Another watch tool
I think a MutationObserver might work, but I haven't gotten it to work.
If anyone has ideas, please enlighten me with them!
Update 14.Oct 2013: Please see my own answer for a solution.

A:

I had to make my own library, but forgot to answer this question with the library.
Source on github.com/leifcr/jquery-csswatch and examples here: leifcr.github.io/jquery-csswatch/examples/

