Databases
StackOverflow2013
Postsdbo
POWatching the offset of an element in the dom, when a different element changes?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWatching the offset of an element in the dom, when a different element changes?
    primarykey
    data
    text
    <p>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.</p> <p><a href="http://bit.ly/Salg1k" rel="nofollow">Example to demonstrate what I need to watch/monitor</a></p> <p>I have implemented it using a timer, but a callback/watcher would be a lot better.</p> <p>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.</p> <p>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: <a href="http://www.west-wind.com/weblog/posts/2008/Sep/12/jQuery-CSS-Property-Monitoring-Plugin-updated" rel="nofollow">jQuery CSS Property Monitoring</a> <a href="http://darcyclarke.me/development/detect-attribute-changes-with-jquery/" rel="nofollow">Another watch tool</a></p> <p>I think a MutationObserver might work, but I haven't gotten it to work.</p> <p>If anyone has ideas, please enlighten me with them!</p> <p>Update 14.Oct 2013: Please see my own answer for a solution.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USleifcr
    1. USleifcr
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWatching the offset of an element in the dom, when a different element changes?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhat have you tried with the `MutationObserver` so far, as this should trigger when attributes are altered. It might not get you the whole way there but it could possibly help -- unless it doesn't trigger on style changes. I've not actually checked that myself.
      singulars
      1. POWatching the offset of an element in the dom, when a different element changes?
      1. USPebbl
    2. COOk just checked, `MutationObservers` do fire for a style attribute change (at least in FireFox).. but it doesn't tell which property was altered. still useful tho. This wont help with reacting if other elements (or if the window) shift(s) dimensions however. For that you will definitely need an interval/timeout checker and a window resize event listener... unless someone out there knows of js methods that allow you to hook into the user agents rendering process?
      singulars
      1. POWatching the offset of an element in the dom, when a different element changes?
      1. USPebbl
    3. COExactly the same problem I experienced. It was quite easy to catch in-line style changes that might affect the offset of another item, but if there is a class change in the dom that changes the offset of the item to be watched a `MutationObserver` will only tell that a class has been added. I think I will add a mutation observer to just catch any changes, then do a manual `if offset.top != old_offset.top`. At least it's better than using timers.
      singulars
      1. POWatching the offset of an element in the dom, when a different element changes?
      1. USleifcr
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload