CODEWITHSUNDEEP
javascriptjqueryhtmldom
leifcr
leifcr

Reputation: 1488

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.

Upvotes: 3

Views: 2508

Answers (1)

leifcr
leifcr

Reputation: 1488

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/

Upvotes: 1

Related Questions