How do I listen to whenever a div changes position with jQuery?

Question

I'd like to do something like this:

$('#myDiv').positionChanged(function() {
    alert('Yay!');
});

Any ideas? Is this already built into jQuery in someway?

How are the `div`s changing their position in the first place? Is there a callback function you could be using? — David Thomas, May 29 '11 at 21:12
What do you mean by 'position'? Are we talking about `z-index`, or something like `left`? Also, possible dupe: http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery — Sampson, May 29 '11 at 21:13
simply add a call back on the function that is changing the div position — Ibu, May 29 '11 at 21:19

score 2 · Accepted Answer · answered May 29 '11 at 23:48

2

I ended up using this:

function whereIChangePosition() {
    // Code to change position
    // ...

    $('#myDiv').trigger('positionChanged');
}

And my listener:

$('#myDiv').bind('positionChanged', function() {
    // Do stuff
});

answered May 29 '11 at 23:48

Kirk Ouimet

score 1 · Answer 2 · answered May 29 '11 at 22:12

unfortunately there is nothing of the kind in jquery. but that will be a good idea for maybe the next release.

So far what you can do is to add a call back yourself:

lets say you have a function that changes the position of a div.

function changePosition(elId,position) {
   $(elId).css('top',position);
   // or more complexe code
}

you can add a call back function to it.

function changePosition(elId,position,callback) {
   $(elId).css('top',position);

   callback();
}

The other method is to use DOMAttrModified event, but it has very low browser support as of this date

2 Answers2