Event when resizing a block element - resize
Sometimes you need to track the behavior of a block element and run additional code when resizing it. Actual with adaptive layout or content loading via AJAX, when the dimensions of the block element are not known in advance. For example, I have an adaptive layout; when reducing the width of the window, some items of the main horizontal menu move to an additional vertical menu that opens when you hover with the mouse. In my case, the border, padding, scrollbar, and content of the block element are taken into account, but you can change the code based on your tasks.
PS All browsers except IE 9 inclusive.
PS All browsers except IE 9 inclusive.
<html> <head> <meta charset="UTF-8"> </head> <body onload="javascript:res(0,0,0,0)"> <script type="text/javascript"> function res(width, height, timeout, validation) { var item = document.getElementById('test_two'); if((width == item.offsetWidth) && (height == item.offsetHeight)) { if(validation) { // , . // document.getElementById('test').innerHTML = Date(); } else { timeout = 500; } window.setTimeout(res, timeout, width, height, timeout, 0); } else { width = item.offsetWidth; height = item.offsetHeight; timeout = 200; window.setTimeout(res, timeout, width, height, timeout, 1); } } </script> <div id="test"></div> <div id="test_two"><p>Test JavaScript.</p></div> </body> </html> ')
Source: https://habr.com/ru/post/312536/
All Articles