Quantcast
Channel: Internet Explorer Web Development forum
Viewing all articles
Browse latest Browse all 3527

IE11 alternative for element.onresize event? or: How can I detect when an arbitrary DOM element (e.g. a ) changes size, on Internet Explorer 11?

$
0
0

IE11 no longer supports the 'onresize' event on arbitrary DOM elements. Is there any alternative on the new Edge version?

I can detect when the style attribute has changed via a MutationObserver, but with this I can't detect size changes originated elsewhere (CSS pseudo classes e.g. :hover, CSS animations, etc.)

Any help will be appreciated.

Sebastian.

Let me rephrase my question and make some clarifications to avoid more confusion:

How can I detect when an arbitrary DOM element (e.g. a <div>) changes size, on Internet Explorer 11?

NOTES:

(1) on IE 10 and below, this could be achieved through the 'resize' event (http://msdn.microsoft.com/en-us/library/ie/ms536959(v=vs.85).aspx) but this does not work on IE11.

(2) this can not be fully achieved via a Mutation Observer. You can detect when the 'style' attribute of an arbitrary element has changed via a MutationObserver, but with this you can't detect size changes originated elsewhere, e.g. changes originated on CSS pseudo classes (:hover), CSS animations, etc.

(3) I know I can put an interval to check for the size of an element every x milliseconds, but this consumes many browser resources. I'm looking for an event-based solution, just as the 'resize' event that previous IE versions have. Or perhaps another event that allows me to do some hack to detect the size (e.g. on Firefox I can use overflow/underflow events and with a couple helper <div>s detect the resize change).

It is very possible that the answer to my question is: "you can not detect that on IE11 through events"; but I want to be sure, and I thought the MSDN IE Dev Center should be the best place to ask about IE11.

Thanks to all who are helping me out in this quest.


Viewing all articles
Browse latest Browse all 3527

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>