| |
|
|
| | На сайте 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 всплывающее окно всё-таки появляется, но только при загрузке окна, а не при удалении элемента. Чем объяснить отсутствие реакции на это событие - мне пока неизвестно. Буду признателен за любой совет по решению данной проблемы. | |
| |
|
|
| |
|
|
| |
для: vadval15
(14.11.2015 в 15:03)
| | | Думаю, перед выводом сообщения, нужно добавить небольшой setTimeout, чтобы дать понять JS, что событие нужно инициировать после изменения параметров окна. | |
| |
|
|
| |
|
|
| |
для: Deed
(15.11.2015 в 13:15)
| | | Спасибо за ответ. К сожалению, событие onresize и в этом случае не подаёт никаких признаков жизни. | |
| |
|
|
| |
|
|
| |
для: Deed
(15.11.2015 в 13:15)
| | | Решение описанной проблемы размещено на сайте 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>
|
| |
| |
|
|
