Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Размеры (координаты) видимой части браузера. 
V
    Опции темы
ShurikA
Дата 23.12.2008, 08:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3



Как правильно вычеслить размеры/координаты видимой части браузера?
Как ни крутил получается бред. Выгледит как размеры body и если страница длинная то надо скролить до её центра.


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
ksnk
Дата 23.12.2008, 09:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



offsetWidth / offsetHeight ?


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
ShurikA
Дата 23.12.2008, 10:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3



ksnk
Это работает для всех браузеров?



--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
ksnk
Дата 23.12.2008, 11:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



Не offsetXXX, как оказалось...
Впрочем, за всю Одессу сказать не могу, но у меня, вроде, живет...

Вот это тестик нужно добить подходящим доктайпом и попробовать еще где-нибудь.
Код

<script type="text/javascript">
function alert_vis(){
  alert([
    'width:',document.body.clientWidth-document.body.offsetLeft,
    'height:',document.body.clientHeight-document.body.offsetTop
  ]);
}
</script>

<body style="overflow:scroll;" onclick="alert_vis();">
<div style="width:2000px;height:2000px;"></div>
</body>




Это сообщение отредактировал(а) ksnk - 23.12.2008, 11:02


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
ShurikA
Дата 23.12.2008, 11:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3



ksnk
Вот в том то всё и дело, мне не нужны размеры body.
Мне нужну расмеры и координаты замого окна.
Цель: поставить div в центре окна, не body. про этом не важно какой в данный момент body. Даже если цлиент по середине контента, он должен увидить этот div.


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
Deja_Vu
Дата 24.12.2008, 16:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 88
Регистрация: 15.6.2007
Где: Казань

Репутация: нет
Всего: 2



Цитата(ShurikA @ 23.12.2008,  11:30)
ksnk
Вот в том то всё и дело, мне не нужны размеры body.
Мне нужну расмеры и координаты замого окна.
Цель: поставить div в центре окна, не body. про этом не важно какой в данный момент body. Даже если цлиент по середине контента, он должен увидить этот div.

Код

div
{
position: fixed;
margin: auto;
width: 100px;
}

так устраивает?
PM Skype   Вверх
ShurikA
Дата 24.12.2008, 22:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3



Deja_Vu
А причём тут это? мне же этот див нужно JS-ом поставить на середину экрана.


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
bars80080
Дата 25.12.2008, 00:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315



зачем js?

впрочем, вариант всё равно не прокатит. хотя бы для ИЕ
PM MAIL WWW   Вверх
ShurikA
Дата 25.12.2008, 01:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3



Цитата(bars80080 @  24.12.2008,  23:01 Найти цитируемый пост)
зачем js?

Потому что я собираю диалог (div) в JS в зависимости от того что за диалог мне нужен и какой текст там будет.


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
ksnk
Дата 25.12.2008, 02:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



ShurikA, Ну, давайте еще раз
document.body.clientWidth - дает нам ширину видимого куска body, который, если сбросить установки и не воображать уж совсем странных случаев разметки, и есть размер видимой части экрана. 
document.body.scrollLeft даст нам размер части, спрятанной за  нижним скроллером. 

примерно то-же самое для  высоты. 

Этих данных, по идее, должно хватить для монтажа дивчика по центру экрана.

Чем конкретно не устраивает именно body?


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
ShurikA
Дата 25.12.2008, 02:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3



Цитата(ksnk @  25.12.2008,  01:25 Найти цитируемый пост)
document.body.clientWidth - дает нам ширину видимого куска body,

А это не вся ширина body? 

Цитата(ksnk @  25.12.2008,  01:25 Найти цитируемый пост)
Чем конкретно не устраивает именно body? 

Он же может быть значительно больше чем окно.

Или я чего то не допонимаю...


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
ShurikA
Дата 25.12.2008, 03:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3



Код

document.body.clientHeight;


Даёт мне всю высоту body, вцлучая то что не водно тоже.


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
mxt
Дата 25.12.2008, 12:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 133
Регистрация: 6.9.2007

Репутация: нет
Всего: 1



Цитата(ShurikA @  25.12.2008,  02:38 Найти цитируемый пост)

А это не вся ширина body? 



нет, только видимая часть. чтоб узнать всю, нужно смотреть offsetWidth
--------------------
PM MAIL   Вверх
ShurikA
Дата 25.12.2008, 13:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3



Цитата(mxt @  25.12.2008,  11:50 Найти цитируемый пост)
нет, только видимая часть. чтоб узнать всю, нужно смотреть offsetWidth 

факт есть факт:

Цитата(ShurikA @  25.12.2008,  02:03 Найти цитируемый пост)
Выделить всёРазметка HTML
1:
    
document.body.clientHeight;


Даёт мне всю высоту body, вцлучая то что не водно тоже. 




--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
AndreySamuylik
Дата 26.12.2008, 14:07 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 8.3.2008

Репутация: нет
Всего: нет



Начнем с того, что под видимой частью окна браузера имеется ввиду клиентская часть (viewport),  где пользователь работает мышкой. Это для того, чтобы люди сразу понимали о чем речь.

Тогда:
Код

function viewport_size() {
  var w = 0, h = 0;
  if (typeof(window.innerWidth) == 'number' ) {
    //Non-IE
    w = window.innerWidth;
    h = window.innerHeight;
  }
  else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    //IE 6+ in 'standards compliant mode'
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
  }
  else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
    //IE 4 compatible
    w = document.body.clientWidth;
    h = document.body.clientHeight;
  }
  return {width: w, height: h};
}



PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0890 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.