Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.11.2015, 14:18
Новичок на форуме
Отправить личное сообщение для vadval15 Посмотреть профиль Найти все сообщения от vadval15
 
Регистрация: 13.04.2013
Сообщений: 7

Событие onresize не срабатывает
На сайте 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 всплывающее окно всё-таки появляется, но только при загрузке окна, а не при удалении элемента. Чем объяснить отсутствие реакции на это событие - мне пока неизвестно. Буду признателен за любой совет по решению данной проблемы.
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2015, 16:24
Аспирант
Посмотреть профиль Найти все сообщения от pnpquest
 
Регистрация: 09.11.2015
Сообщений: 94

Причем тут удаление элемента? onresize -- это событие изменения размера окна.
Ответить с цитированием
  #3 (permalink)  
Старый 16.11.2015, 10:26
Новичок на форуме
Отправить личное сообщение для vadval15 Посмотреть профиль Найти все сообщения от vadval15
 
Регистрация: 13.04.2013
Сообщений: 7

Пример 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, 16.11.2015 в 10:47.
Ответить с цитированием
  #4 (permalink)  
Старый 16.11.2015, 17:23
Новичок на форуме
Отправить личное сообщение для vadval15 Посмотреть профиль Найти все сообщения от vadval15
 
Регистрация: 13.04.2013
Сообщений: 7

Выяснилось, что решение описанной проблемы размещено на сайте 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не срабатывает событие laliev Элементы интерфейса 3 28.09.2015 11:23
Не срабатывает событие mouseup в chrome Евгений_Лазаренко Events/DOM/Window 6 28.01.2015 11:06
Вопрос по backbone - не срабатывает событие vuler Общие вопросы Javascript 4 28.12.2014 20:20
Событие на теге input срабатывает несколько раз hrundel Events/DOM/Window 3 15.12.2013 12:49
Некорректно срабатывает событие DZHETIGAPA Events/DOM/Window 4 12.05.2011 21:28