Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2016, 21:58
Интересующийся
Отправить личное сообщение для Woogy Посмотреть профиль Найти все сообщения от Woogy
 
Регистрация: 11.12.2014
Сообщений: 10

Выравнивание по центру
Добрый день друзья! Возникла проблема , написана карта. Сетка отрисовывается с помощью JS + CSS и заселяется в DIV#MAP...

Поле сейчас размером 20х20 клеток , каждая клетка 100 по ширине и высоте. Для создания псевдо изометрии высоту делю на 2. Слой карты имеет ( position: fixed; ) , каждая клетка ( position:absolute; ). Для элемента управления карте добавлен draggable jquery.

Вопрос: как сделать выравнивание карты строго по центру (по высоте и ширине окна) , и выравнивать в зависимости от изменения размеров окна ?
Изображения:
Тип файла: jpg Ashampoo_Snap_2016.03.27_02h12m36s_002_.jpg (11.4 Кб, 5 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2016, 15:29
Новичок на форуме
Отправить личное сообщение для Boortcore Посмотреть профиль Найти все сообщения от Boortcore
 
Регистрация: 30.03.2016
Сообщений: 5

Высота и ширина документа
document.documentElement.clientHeight;
document.documentElement.clientWidth;

Ширина и высота элемента.
var heightElem = parseInt(getComputedStyle(elem).height);
var widthElem = parseInt(getComputedStyle(elem).width);


Спозиционировать элемент строго по центру можно так
var Elem = document.querySelector('div#map');
Elem.style.top = (document.documentElement.clientHeight - heightElem)/2;
Elem.style.left = (document.documentElement.clientWidth - widthElem)/2;

Чтобы позиционирование изменялось под размер экрана, нужно засунуть код выше в функцию и повесить её на событие window.onresize
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2016, 00:25
Интересующийся
Отправить личное сообщение для Woogy Посмотреть профиль Найти все сообщения от Woogy
 
Регистрация: 11.12.2014
Сообщений: 10

Сообщение от Boortcore Посмотреть сообщение
Высота и ширина документа
document.documentElement.clientHeight;
document.documentElement.clientWidth;

Ширина и высота элемента.
var heightElem = parseInt(getComputedStyle(elem).height);
var widthElem = parseInt(getComputedStyle(elem).width);


Спозиционировать элемент строго по центру можно так
var Elem = document.querySelector('div#map');
Elem.style.top = (document.documentElement.clientHeight - heightElem)/2;
Elem.style.left = (document.documentElement.clientWidth - widthElem)/2;

Чтобы позиционирование изменялось под размер экрана, нужно засунуть код выше в функцию и повесить её на событие window.onresize

Дружище спасибо! В своем решении использую Jquery ( .css )
Ответить с цитированием
  #4 (permalink)  
Старый 31.03.2016, 20:13
Новичок на форуме
Отправить личное сообщение для Boortcore Посмотреть профиль Найти все сообщения от Boortcore
 
Регистрация: 30.03.2016
Сообщений: 5

А я люблю по-хардкору. Да и Jquery не порушится, если добавить пару строк кода на нативном JS.))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать всплывающее окно по центру экрана? jslgogo Общие вопросы Javascript 8 26.08.2014 09:18
Выравнивание всплывающего окна по центру экрана. waw555 jQuery 2 07.09.2012 15:43
Выравнивание по центру blackfox ExtJS 2 18.11.2011 15:57
Выравнивание картинки по центру Pumych (X)HTML/CSS 4 12.03.2011 16:53
Окошко по центру OlegSmirnov Элементы интерфейса 6 01.11.2010 11:14