Форум

vadval15 · #1 (**permalink**) 14.11.2015, 15:18

На сайте http://help.dottoro.com/ljorlllt.php описывается событие onresize и даются примеры его использования. При попытке запуска указанных примеров в ОС ALT Linux 6.0 Centaurus (браузерах Firefox 17.0.11, Opera 12.15, Epiphany 2.30.6, Google Chrome 21.0.1180.89) размещённые в них события срабатывают, кроме onresize: в этом случае совершенно ничего не происходит. Правда, в первом примере в браузерах Epiphany и Google Chrome всплывающее окно всё-таки появляется, но только при загрузке окна, а не при удалении элемента. Чем объяснить отсутствие реакции на это событие - мне пока неизвестно. Буду признателен за любой совет по решению данной проблемы.

pnpquest · #2 (**permalink**) 14.11.2015, 17:24

Причем тут удаление элемента? onresize -- это событие изменения размера окна.

vadval15 · #3 (**permalink**) 16.11.2015, 11:26

Пример 1 (по ссылке), где удаление элемента должно вызвать появление всплывающего окна.

<head> 
      <script type="text/javascript"> 
          function OnResizeDocument () { 
              alert ("Размер окна или документа изменился."); 
          } 
        
          function RemoveBlue () { 
              var blueDiv = document.getElementById ("blueDiv"); 
              if (blueDiv) { 
                  blueDiv.parentNode.removeChild (blueDiv); 
              } 
          } 
      </script> 
  </head> 
  <body onresize="OnResizeDocument ()"> 
      Если вы УДАЛИТЕ синий элемент, высота документа уменьшается. 
      <br /> 
      <button onclick="RemoveBlue ();">УДАЛИТЕ синий элемент</button> 
      <br /> <br /> 
      Когда размер документа изменяется, событие onresize происходит на элементе body в Internet Explorer. 
      В Firefox, Opera, Google Chrome и Safari событие onresize происходит на элементе body, когда окно браузера изменяется. 
      Изменение размера окна браузера тоже вызывает событие onresize в Internet Explorer. 
      Попробуйте изменить размер окна браузера! 
      <br /> <br /> 
      <div id="blueDiv" style="height:500px; background-color:blue;"></div> 
  </body>

vadval15 · #4 (**permalink**) 16.11.2015, 18:23

Выяснилось, что решение описанной проблемы размещено на сайте http://habrahabr.ru/post/166321/
В соответствии с ним преобразованный код будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Onresize</title>
    <script type="text/javascript">
        function UpdateCoords(){
            var posX=document.getElementById("posX");
            var posY=document.getElementById("posY");
            posX.innerHTML=document.getElementById("dv").offsetWidth;
            posY.innerHTML=document.getElementById("dv").offsetHeight;
        }
        function fi(){
   setTimeout(function(){
   fr.onresize=function(){
     setTimeout(UpdateCoords,20)}
   },200);
        }
    </script>
</head>
<body onload="fi()">
    Select and resize the blue element with your mouse!
    <div contenteditable="true" style="border:1px solid #000000; height:220px;">
        <div id="dv" style="position: absolute; top: 30px; left: 10px; width: 200px; height: 100px; background-color: blue;">
         <iframe name="fr" id="fr" width=100% height=100% style="position: absolute; z-index: -1;" frameborder=0></iframe>
        </div>
    </div>
    <br>
    <button id="bt" style="position: absolute; top: 390px; left: 10px; width: 100px; height: 40px;" onclick="if (document.getElementById('dv').style.height=='100px'){document.getElementById('dv').style.height='200px'} else {document.getElementById('dv').style.height='100px';}">Change</button>
    <br>
    The size of the blue element:<br>
    width: <span id="posX" style="color: red"></span><br>
    height: <span id="posY" style="color: red"></span>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript