JavaScript: Is there an element geometry changed event?

Question

There is a resize DOM event, even for generic elements but I can't find a event that is fired when the position of an element changed. I'd like to have an event that is fired whenever the geometry of an element is changed. It can be Mozilla specific, because I write a Firefox Add-On.

Edit: Or is there a way to pin an element to another one that always works, no matter what crazy stylesheets might be used (so one is always on top of the other)?

Answer 1

Edit: Or is there a way to pin an element to another one that always works, no matter what crazy stylesheets might be used (so one is always on top of the other)?

you can set a bunch of !important rules, which take priority (unless someone else uses !important , which is rare):

.pinned {
    position : absolute !important;
    top      : 0px      !important;
    right    : 0px      !important;
    bottom   : 0px      !important;
    left     : 0px      !important;
}

Answer 2

DOMSubTreeModified is the closest thing around that isn't Mozilla-specific, and I don't know (or suspect) that it gets fired when geometry changes. You might be able to use DOMAttrModified and check which attrs get changed and dispatch on that, if you know which attributes will be changing, and assuming you can get CSS attributes with it. I don't think you can, but I'm not sure.

https://developer.mozilla.org/en/Gecko-Specific_DOM_Events lists a MozAfterPaint event that should be able to do what you want. I think.

Good luck.

Edit: Wait, why do you need to do this "no matter what crazy stylesheets might be used"?