Не перемещаются объекты. "Резиновый" сайт.
Только начал знакомится с вебом, многое непонятно. Читаю сразу пару книжек (одна строго по 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>
|
Ээээ, не очень понимаю, что нарисовать )))
Проблема в том, что нужно объекту присвоить свойство, координаты, размер, выраженные в первую очередь в относительных единицах. например так: Цитата:
|
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Probe</title>
<style>
.Main { /* Вместилище */
width: calc((4vw + 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 { /* Все управляемые блоки */
position:relative;
width: 10vh;
height: 10vh;
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" >1</div>
<div id="F2" class="Block" >2</div>
<div id="F3" class="Block" >3</div>
<div id="F4" class="Block" >4</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(4vw* ' + x + ' + ' + x + ' * 2px)';
b.style.top='calc(3vh * ' + y + ' + ' + y + ' * 2px)';
// alert(b.style.cssText);
};
</script>
</body></html>
А насчет посмотреть стили - https://learn.javascript.ru/styles-and-classes |
Dilettante_Pro, спасибо, самые сложные ошибки, как всегда, в мелочах )))
|
| Часовой пояс GMT +3, время: 10:22. |