Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to know when an DOM element moves or is resized

I'd like to know if there is a DOM event to listen for that tells me when a DOM element moves is repositioned or is resized on the page. I am not talking about an elements being drag/dropped. An example is if a have a list of three items on a page, and I use JS to remove one of the top two list items from the page (or hide it or whatever), I'd like to attach a handler to run when the third list item gets moved up in the page.

I am using jQuery, so plain javascript or jQuery answers are acceptable.

Maybe there are no move/position/resize events at the element level, so if there is a page/doc level event that will tell me that the page was repainted and I can check if I need to call a function again?

Background

I put a transparent div over an element while a webservice call is made to delete that element. Since I need to absolutely position that overlay div, I want it to track the element that it covers initially. In effect anchoring it to the base element.

like image 863
slolife Avatar asked Aug 09 '10 22:08

slolife


People also ask

How do you check if a div is resized?

In the mean time, you can use function like the following. Since, the majority of element size changes will come from the window resizing or from changing something in the DOM. You can listen to window resizing with the window's resize event and you can listen to DOM changes using MutationObserver .

How do I know if my element is still in DOM?

Use the getElementsByTagName to Check the Existence of an Element in DOM. The function getElementsByTagName() can return all elements with the specified tagName in DOM . The return of the function can be one or more elements or null if no element is found.

How do I get the DOM element position?

Use the Element. getBoundingClientRect() Function to Get the Position of an Element in JavaScript. The getBoundingClientRect() function produces a DOMRect object containing information about an element's size and position in the viewport.


1 Answers

I don't think this solution would be relevant after so long, but there's an excellent cross-browser solution based on the overflow and underflow events presented here

To enable our resize listening magic, we inject an object element into the target element, set a list of special styles to hide it from view, and monitor it for resize – it acts as a trigger for alerting us when the target element parent is resized.

The <object> element's content has a native resize event, just like a window.

like image 130
Harsha Ivaturi Avatar answered Oct 14 '22 04:10

Harsha Ivaturi