Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не срабатывает размещение элемента (CSS, JS) / 25 сообщений из 25, страница 1 из 1
17.07.2019, 08:42
    #39838157
IcyWizard
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
Нужно созданный элемент разместить по центру окна. Страница выходит за границы окна во все 4 стороны.


Сделано так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script>
        function setWindowOnCenter(elem){
            
            var centerX = window.pageXOffset + document.documentElement.clientWidth / 2;
            centerX = Math.floor(centerX);
            var centerY = window.pageYOffset + document.documentElement.clientHeight / 2;
            centerY = Math.floor(centerY);

            var elemStyle = getComputedStyle(elem);
            
            var elemWidth = elemStyle.width;
            elemWidth = elemWidth.slice(0,-2);
            elemWidth = Math.floor(elemWidth/2);
            elemWidth = centerX - elemWidth + 'px';
            elem.style.left = elemWidth;
            
            var elemHeigth = elemStyle.height;
            elemHeigth = elemHeigth.slice(0,-2);
            elemHeigth = Math.floor(elemHeigth/2);
            elemHeigth = centerY - elemHeigth + 'px';
            elem.style.top = elemHeight;
            
        }
        
        function generateForm(){
            //central_form
            var myForm = document.createElement('div');
            
            myForm.className = 'central_form';
            document.body.appendChild(myForm);
            setWindowOnCenter(myForm);
        
        }
        
        window.scrollTo(1500,1500);
        generateForm();
    </script>
</body>
</html>



css:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
body {
    height: 4000px;
    width: 4000px;
} 
.central_form{
    display: block;
    position: absolute;
    padding: 10px;
    
    width: 200px;
    height: 150px;
    
    border-style:solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: green;

    z-index: 20;

    background:linear-gradient(45deg,white 0%,lightgreen 50%,green 100%);
    box-shadow:0px 0px 6px 2px darkgreen inset;    
}



Результат: созданный элемент располагается по центру ширины, но не высоты, по высоте прилипает к верху страницы. Скрипт в этом месте:
Код: javascript
1.
elem.style.top = elemHeight;

прекращает работу. Что не так?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 09:49
    #39838181
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
IcyWizard , если у элемента в ЦС изначально задана высота и ширина - он без проблем центрируется стилями. ;)
https://ruseller.com/lessons.php?rub=2&id=1833
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 09:58
    #39838185
IcyWizard
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
Ширина и высота не всегда будут заданы. Но все блоки, использующие setWindowOnCenter, предполагаются display: block и position: absolute
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 09:58
    #39838186
IcyWizard
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
Этот же код https://jsfiddle.net/nj4aotzu/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 09:59
    #39838187
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
IcyWizard , вот тебе один из вариантов центрирования элементов, у которых заданы размеры, с использованием абсолютного позиционирования.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
body {
    position: relative;
    height: 4000px;
    width: 4000px;
} 
.central_form {
    width: 200px;
    height: 150px;
    position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -75px;
	margin-left: -100px;
    padding: 10px;
    border-style:solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: green;
    z-index: 20;
    background:linear-gradient(45deg,white 0%,lightgreen 50%,green 100%);
    box-shadow:0px 0px 6px 2px darkgreen inset;    
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<script type='text/javascript'>
function generateForm(){
	var myForm = document.createElement('div');
	myForm.className = 'central_form';
	myForm.innetHTML = 'central_form';
	document.body.appendChild(myForm);
}
window.scrollTo(1500,1500);
generateForm();
</script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 10:05
    #39838188
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
IcyWizard , центрирование это вообще довольно исследованная тема ...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 10:10
    #39838189
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
IcyWizardШирина и высота не всегда будут заданы. Но все блоки, использующие setWindowOnCenter, предполагаются display: block и position: absolute
Если размеры в ЦСС не заданы, центрирование можно выполнить используя "таблицу" на всю рабочую область, без
Код: css
1.
position: absolute;


Это будет только мешать.

Таблица может центрировать любые элементы по обоим направлениям, даже если размеры тех элементов заранее не известны.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 10:13
    #39838191
IcyWizard
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
krvsaIcyWizard, вот тебе один из вариантов центрирования элементов


IcyWizardНужно созданный элемент разместить по центру окна. Страница выходит за границы окна во все 4 стороны.


Приведенный код располагает элемент по центру страницы, а не окна :(.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 10:34
    #39838202
IcyWizard
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
Есть ли какие-то свойства CSS, чтобы работали не со страницей, а с окном?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 11:19
    #39838229
Konst_One
Konst_One
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
flex юзай и 100vh
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 11:23
    #39838233
IcyWizard
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
Konst_Oneflex юзай и 100vh

можно для нуба чуть подробнее?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 11:34
    #39838240
Konst_One
Konst_One
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
Код: sql
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
<!DOCTYPE html>
 <html>
 <head>
<style>
.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
</style>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>



только в современных браузерах будет работать правильно
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 11:45
    #39838247
IcyWizard
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
Та же проблема, что и выше. Команда позиционирует блок по центру страницы, но не окна. Это хорошо видно если увеличить размер body

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
<!DOCTYPE html>
 <html>
 <head>
<style>
body {
    height: 4000px;
    width: 4000px;
} 
.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
</style>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 11:49
    #39838248
Konst_One
Konst_One
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
а зачем вы ставите размер body?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 11:59
    #39838250
IcyWizard
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
Страница представляет собой поле, заполненное большим кол-вом элементов. Весь код нет смысла приводить, приведен тот кусок, в котором возникла проблема. Из первого поста видно, что он определяется как расположенный абсолютно, прицеплен непосредственно к body, и по идее в плане позиционирования коррелировать с остальными элементами не должен.

Страница большая, прокручена на момент использования generateForm может быть как угодно, и смысл в том чтобы элемент размещался по центру текущего окна.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 12:01
    #39838251
Konst_One
Konst_One
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
Код: sql
1.
2.
3.
4.
<body>
<div id="alert">это центруем</div>
<div id="container">здесь контент вашего размера, не забудьте про скроллинги и тп</div>
</body>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 12:02
    #39838252
Konst_One
Konst_One
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
окно, что центруется, должно всплывать над контентом (задайте zorder правильный)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 12:03
    #39838253
Konst_One
Konst_One
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
или лучше возьмите готовое стандартное решение для popup window
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 12:17
    #39838260
IcyWizard
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
По последнему варианту (с убранным размером body) блок размещается по середине экрана, каким бы он был, если максимально отскролить влево-вверх.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 12:22
    #39838265
Konst_One
Konst_One
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
ёще раз, вам надо взять готовое решение для popupwindow, например такого плана jhttps://jqueryui.com/dialog/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2019, 17:34
    #39838415
IcyWizard
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
Я понимаю что воспользоваться готовым решением проще, но хотелось бы разобраться где сбой, чтобы на будущее не спотыкаться на аналогичных случаях.

В итоге выяснилось, что не срабатывает именно само присвоение свойства elem.style.top = elemHeight, почему - загадка. Через промежуточную переменную заработало.

Вот так - работает
Код: html
1.
2.
var posTop = elemHeigth;
elem.style.top = posTop;



а так - нет

Код: html
1.
elem.style.top = elemHeight;
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.07.2019, 07:32
    #39839020
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
IcyWizardПриведенный код располагает элемент по центру страницы, а не окна :(.
Это легко поправимо...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
body {
    position: relative;
    height: 4000px;
    width: 4000px;
} 
.central_form {
	width: 200px;
	height: 150px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -75px;
	margin-left: -100px;
	padding: 10px;
	border-style:solid;
	border-width: 1px;
	border-radius: 10px;
	border-color: green;
	z-index: 20;
	background:linear-gradient(45deg,white 0%,lightgreen 50%,green 100%);
	box-shadow:0px 0px 6px 2px darkgreen inset;    
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<script type='text/javascript'>
function generateForm(){
	var myForm = document.createElement('div');
	myForm.className = 'central_form';
	myForm.innetHTML = 'central_form';
	document.body.appendChild(myForm);
}
window.scrollTo(1500,1500);
generateForm();
</script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.07.2019, 08:20
    #39839034
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
krvsa,

это
type='text/javascript'
type='text/css'

лишнее
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.07.2019, 15:49
    #39839331
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
вадя , из песни слов не выкинешь... (с)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.07.2019, 16:23
    #39839369
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает размещение элемента (CSS, JS)
krvsa вадя , из песни слов не выкинешь... (с)
Код: html
1.
<!DOCTYPE html>

этого не требует.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не срабатывает размещение элемента (CSS, JS) / 25 сообщений из 25, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 381ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1443720]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 52ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 54ms
get tp. blocked users:
 2ms
others: 231ms
total:  381ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]