jQuery event to detect when element position changes

javascript jquery events javascript-events
Steve Horn picture Steve Horn · Dec 10, 2008 · Viewed 34.2k times · Source

I would like to know if there is a jQuery event that I can use to determine when a particular DIV's top property has changed.

For instance, I have invisible content above a DIV. When that content becomes visible, the DIV is shifted down. I would like to capture that event and then use the offset() function to get the X/Y coordinates.

Answer

joshperry picture joshperry · Dec 10, 2008

The easy answer is that there are no events in the DOM for detecting layout updates.

You have a couple options the way I see it:

  1. Poll, nasty but it may work depending on your update frequency requirements.

  2. Tap into whatever event causes the invisible DIV to change size and do whatever you need to do in that handler

I shall correct myself.

I took a look at the DOM and noticed the DOMAttrModified event and found this JQuery Plug-In that you might be able to leverage to do what you want.

As the article mentions, it works great in IE and Firefox but seems to have problems in WebKit.

Related questions

What is the difference between the mouseover and mouseenter events?

I have always used the mouseover event, but while reading the jQuery documentation I found mouseenter. They seem to function exactly the same. Is there a difference between the two, and if so when should I use them? (Also applies …

Read More
How can I get jquery .val() AFTER keypress event?

I got: $(someTextInputField).keypress(function() { alert($(this).val()); }); Now the alert always returns the value BEFORE the keypress (e.g. the field is empty, I type 'a' and the alert gives me ''. Then I type 'b' and the alert …

Read More
Create a jQuery special event for content changed

I'm trying to create a jQuery special event that triggers when the content that is bound, changes. My method is checking the content with a setInterval and check if the content has changed from last time. If you have any …

Read More