Только начал знакомится с вебом, многое непонятно. Читаю сразу пару книжек (одна строго по JS, а вторая маленькая, кратко охватывает "все").
Идея - создать всплывающий элемент управления, в контейнере строго определенных пропорций, с автоматическим подгоном размеров под высоту страницы (что бы практически не зависеть от размера окна браузера):
Кратко о начатом:
1. Основной контейнер, с привязкой размера к высоте окна, для автоматического подбора размера самим браузером (как сделать полное вписание с учетом и высоты и ширины - пока не нашел)
2. Внутри будут находится динамические модули настроек будующей странички (для отработки по ОнКлик и пр.) и небольшая область с отображением переключаемых параметров.
3. Для пробы создал 4 контейнера DIV и пытаюсь их перемещать по позициям, определяемым процентами видимой области (как-бы по клеточкам).
Проблема: Контейнеры (все 4) в позиции 0,0 и не перемещаются, так же нельзя считать их текущие координаты, да и прочие свойства - они "пустые".
* Если указать пикселы, то контейнеры перемещаются, но теряется привязка к текущему размеру окна браузера, а привязывать по событию изменения размеров окна - кажется неправильным, как минимум некрасиво.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Probe</title>
<style>
.Main { /* Вместилище */
width: calc((4vh + 2px) * 10 + 20px);
height: calc(100vh - 20px);
background-color: #000;
border: 4px solid #888;
margin: 0px;
padding: 0px;
position:fixed;
top: 0px;
left: calc(50vw - 20vh - 24px);
}
#DataArea { /* Вывод текста */
background-color: #444;
text-align:right;
font-size:6vh;
color:#fac;
padding-right: 3vh;
}
.Block { /* Все управляемые блоки */
width: 4vh;
height: 4vh;
border: 1px solid #fff;
background-color: #aaa;
border-radius: 25%
}
</style>
</head>
<body>
<div class="Main">
<div id="DataArea">012345678</div>
<div id="Controls">
<div id="F1" class="Block" style="position:fixed;"></div>
<div id="F2" class="Block" style="position:fixed;"></div>
<div id="F3" class="Block" style="position:fixed;"></div>
<div id="F4" class="Block" style="position:fixed;"></div>
</div>
</div>
<script>
'use strict';
var b,x,y; //Block-объект, координаты
for (var p=1;p<5;p++) {
x=~~(Math.random()*10);
y=~~(Math.random()*10);
b='F'+p.toString();
b=document.getElementById(b);
// А ВОТ ДАЛЬШЕ ПРОБЛЕМА - не могу ни установить новые координаты "блоков", на считать текущие, ни х\у, ни размер!
b.style.left='calc(40hv * x + x * 2px)';
b.style.top='calc(4hv * y + y * 2px)';
alert(b.id+':'+b.style.backgroundColor+':'+b.style.width+':'+b.style.height+':'+b.style.height+':'+b.style.left+':'+b.style.top);
};
</script>
</body></html>