Форум

NiOl · #1 (**permalink**) 12.06.2017, 01:33

Только начал знакомится с вебом, многое непонятно. Читаю сразу пару книжек (одна строго по 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>

NiOl · #2 (**permalink**) 13.06.2017, 15:53

Ээээ, не очень понимаю, что нарисовать )))
Проблема в том, что нужно объекту присвоить свойство, координаты, размер, выраженные в первую очередь в относительных единицах. например так:

Цитата:

Block.style.left='calc(4hv * x + 2px *x)';

При описании стиля в шапке страницы - все нормально, а вот поменять на ходу почему-то не получается - отладчик ошибок не показывает, но и "не рисует". (((

Dilettante_Pro · #3 (**permalink**) 13.06.2017, 18:28

<!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

NiOl · #4 (**permalink**) 13.06.2017, 22:47

Dilettante_Pro, спасибо, самые сложные ошибки, как всегда, в мелочах )))

Форум

Справочник

Discord чат

Курсы javascript