ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не срабатывает размещение элемента (CSS, JS)
25 сообщений из 25, страница 1 из 1
Не срабатывает размещение элемента (CSS, JS)
    #39838157
IcyWizard
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IcyWizard
Гость
Нужно созданный элемент разместить по центру окна. Страница выходит за границы окна во все 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, 08:42
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39838181
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
IcyWizard , если у элемента в ЦС изначально задана высота и ширина - он без проблем центрируется стилями. ;)
https://ruseller.com/lessons.php?rub=2&id=1833
...
Рейтинг: 0 / 0
17.07.2019, 09:49
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39838185
IcyWizard
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IcyWizard
Гость
Ширина и высота не всегда будут заданы. Но все блоки, использующие setWindowOnCenter, предполагаются display: block и position: absolute
...
Рейтинг: 0 / 0
17.07.2019, 09:58
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39838186
IcyWizard
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IcyWizard
Гость
Этот же код https://jsfiddle.net/nj4aotzu/
...
Рейтинг: 0 / 0
17.07.2019, 09:58
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39838187
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
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, 09:59
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39838188
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
IcyWizard , центрирование это вообще довольно исследованная тема ...
...
Рейтинг: 0 / 0
17.07.2019, 10:05
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39838189
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
IcyWizardШирина и высота не всегда будут заданы. Но все блоки, использующие setWindowOnCenter, предполагаются display: block и position: absolute
Если размеры в ЦСС не заданы, центрирование можно выполнить используя "таблицу" на всю рабочую область, без
Код: css
1.
position: absolute;


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

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


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


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

можно для нуба чуть подробнее?
...
Рейтинг: 0 / 0
17.07.2019, 11:23
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39838240
Фотография Konst_One
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Konst_One
Участник
Код: 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:34
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39838247
IcyWizard
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IcyWizard
Гость
Та же проблема, что и выше. Команда позиционирует блок по центру страницы, но не окна. Это хорошо видно если увеличить размер 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:45
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39838248
Фотография Konst_One
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Konst_One
Участник
а зачем вы ставите размер body?
...
Рейтинг: 0 / 0
17.07.2019, 11:49
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39838250
IcyWizard
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IcyWizard
Гость
Страница представляет собой поле, заполненное большим кол-вом элементов. Весь код нет смысла приводить, приведен тот кусок, в котором возникла проблема. Из первого поста видно, что он определяется как расположенный абсолютно, прицеплен непосредственно к body, и по идее в плане позиционирования коррелировать с остальными элементами не должен.

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

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

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



а так - нет

Код: html
1.
elem.style.top = elemHeight;
...
Рейтинг: 0 / 0
17.07.2019, 17:34
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39839020
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
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, 07:32
| Ответить | Цитировать | Написать  
Не срабатывает размещение элемента (CSS, JS)
    #39839034
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
krvsa,

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

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

этого не требует.
...
Рейтинг: 0 / 0
19.07.2019, 16:23
| Ответить | Цитировать | Написать  
25 сообщений из 25, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не срабатывает размещение элемента (CSS, JS)
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39838157&tid=1443720]:
 0ms
get settings:
 10ms
get forum list:
 16ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 55ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 55ms
get tp. blocked users:
 1ms
others: 16ms
total:  171ms
созд. / загр.: 171ms
x
x
Закрыть


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