We trace "onresize" on an element
A rather ancient task is to track the resizing event of an arbitrary element on a page. This is relevant when creating a module-independent structure for adjusting the size and other CSS attributes of the desired element on the page, in particular, blocks with periodic Ajax loading (for example, news items). Typically solved through timing and periodic polling of the dimensions of the element. New option - not using the timed poll.
Trick: Insert an empty frame with position: absolute and 100% size inside the element, attach the position: relative element ; . And track frame.onresize :
')
Trick: Insert an empty frame with position: absolute and 100% size inside the element, attach the position: relative element ; . And track frame.onresize :
Test Code:
<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> ')
Under the spoiler
Taking into account the wishes, more detailed code:Extended Code
Code:
<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> Source: https://habr.com/ru/post/166321/
All Articles