Привет. Написал код, который в зависимости от размеров окна браузера меняет размеры svg, т.к. я хочу, чтобы svg всегда была в максимально возможном масштабе по центру и чтобы страница вниз не прокручивалась. Проблема в следующем: если размеры страницы менять медленно и плавно, то все работает хорошо, но если сделать это быстро/резко, то масштаб будет не такой как хотелось бы, например, при резком сужении окна, боковые рамки классы box sidebar могут не уменьшится до 0рх, хотя должны. Подскажите как можно решить.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>testPrj</title>
<style>
.wrapper {
height: 100%;
display: table;
width: 100%;
}
.header {
display: table-row;
height: 1px;
}
.main {
height: 100%;
display: table;
width: 100%;
}
.horizontalbar {
display: table-row;
height: 0px;
}
.box {
display: table-cell;
}
.sidebar {
width: 0px;
}
.content {
height: 100%;
}
.content iframe {
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
display: block;
}
.footer {
display: table-row;
height:1px;
}
/* Basic Style*/
* { margin:0; padding:0;}
html, body {
height: 100%;
}
</style>
</head>
<body bgcolor="#ffff00">
<div class="wrapper">
<div class="header">
<h1>Header</h1>
<button onclick='location.href="Auto.html"'>Auto</button>
<button onclick='location.href="Auto1.html"'>Auto1</button>
</div>
<div class="main">
<div class="horizontalbar"></div>
<div class="box sidebar"></div>
<div class="box content">
<iframe frameborder="0" marginwidth="0" marginheight="0" src="Auto.svg" id="AutoId"></iframe>
</div>
<div class="box sidebar"></div>
<div class="horizontalbar"></div>
</div>
<div class="footer">Text. Text</div>
</div>
<script type="text/javascript" src="Auto.js"></script>
</body>
</html>
window.onload = function() {
svgDoc = document.getElementById("AutoId").contentDocument;
var timer = setInterval(anim, 100);
var timerPost = setInterval(setPost, 100);
initClick();
updateSize();
}
window.onresize = updateSize;
function updateSize() {
vpW = document.getElementsByClassName('main')[0].clientWidth;
vpH = document.getElementsByClassName('main')[0].clientHeight;
//imgW = document.getElementsByClassName('box content')[0].clientWidth;
//imgH = document.getElementsByClassName('box content')[0].clientHeight;
imgW = 1088; // size svg
imgH = 1088; // size svg
//alert(vpW + ':' + vpH + ' = ' + vpW/vpH + ' ' + imgW + ':' + imgH + ' = ' + imgW/imgH);
if(vpW/vpH < imgW/imgH) {
for(var i = 0; i < 2; i++) {
document.getElementsByClassName('horizontalbar')[i].style.height = (vpH - vpW)/2 + 'px';
document.getElementsByClassName('box sidebar')[i].style.width = '0px';
}
} else {
for(var i = 0; i < 2; i++) {
document.getElementsByClassName('box sidebar')[i].style.width = (vpW - vpH)/2 + 'px';
//document.getElementsByClassName('horizontalbar')[i].style.height = '0px'
}
}
}