Defff Jan 20 2013 at 04:37

Отслеживаем «onresize» на элементе

2 min

72K

Tutorial

Достаточно древняя задача отслеживания события изменения размеров произвольного элемента на странице. Актуально при создании модульно-независимой структуры для корректировки размеров и иных сss-атрибутов нужного элемента на странице, в частности блоков с периодической Аякс-подгрузкой (например: новостных). Типично решается через таймирование и периодический опрос размеров элемента. Новый вариант, — не использующий таймирующий опрос.

Трюк: Внутрь элемента вставляем пустой фрейм с 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>

Tags:

Hubs: