Достаточно древняя задача отслеживания события изменения размеров произвольного элемента на странице. Актуально при создании модульно-независимой структуры для корректировки размеров и иных сss-атрибутов нужного элемента на странице, в частности блоков с периодической Аякс-подгрузкой (например: новостных). Типично решается через таймирование и периодический опрос размеров элемента. Новый вариант, — не использующий таймирующий опрос.
Трюк: Внутрь элемента вставляем пустой фрейм с position:absolute и 100%-(ыми)размерами, придаём элементу position:relative;. И отслеживаем frame.onresize:
Трюк: Внутрь элемента вставляем пустой фрейм с position:absolute и 100%-(ыми)размерами, придаём элементу position:relative;. И отслеживаем frame.onresize:
Тест-Код:
<div id="Test" style="position:relative;border:red solid 1px;width:200px;height:100px;"> <iframe name="frame" width=100% height=100% style="position:absolute;z-index:-1"></iframe> Тут контент ... </div> <script type="text/javascript"> frame.onresize = function(){ alert('Размеры div #Test изменены.'); } setTimeout(function(){ //Тестовое изменение размера через 3сек. document.getElementById("Test").style.width='100px'; },3000); </script>
Под спойлером
С учётом пожеланий, — более развёрнутый код:Расширенный код
Код:
<div id="Test" style="position:relative;border:red solid 1px;width:200px;height:100px;"> <!--// Для каждого нового элемента name= - свое! //--> <iframe name="frame" width=100% height=100% style="position:absolute;z-index:-1"></iframe> Тут контент ... </div> <script type="text/javascript"> setTimeout(function(){ // Отработка задержки фрейма (для FF и ИЕ) var timerResize='first'; frame.onresize = function(){ // frame, - Имя фрейма (name=frame) - cм начало Кода; if(timerResize!=='first')clearTimeout(timerResize); timerResize=setTimeout( function(){ // Задержка для очистки чрезмерных срабатываний; alert('Размеры div #Test изменены.'); // Тело обработки события «onresize»; },20) // Параметр 20(ms) , - зависит от нужной скорости реагирования на повторные события; // актуально при плавных изменениях размера элемента, // либо почти одновременное изменением размера несколькими разными процессами. } },200); setTimeout(function(){ //Тестовое изменение размера. document.getElementById("Test").style.width='100px'; },3000); setTimeout(function(){ //Тестовое изменение размера. document.getElementById("Test").style.width='200px'; },7000); </script>