Ширина/высота окна

[DjTarik]

Собственно, высчитываю так:

document.documentElement.clientWidth - ширина документа без полос прокрутки

document.documentElement.scrollWidth - ширина документа с полосой прокрутки

Тоже самое с высотой:

document.documentElement.clientHeight

document.documentElement.scrollHeight

Можно ли как-нить самим повлиять на эти значение?

Конкретно, можно ли задать им определённую ширину, к примеру?

Или, что ещё лучше, сбросить по умолчанию...

Спасибо.

[Great Rash]

Ширину и высоту можно задавать только для вновь созданного окна. Текущим окном управлять никак нельзя. И это правильно кстати.

[DjTarik]

Ширину и высоту можно задавать только для вновь созданного окна. Текущим окном управлять никак нельзя. И это правильно кстати.

Я про область просмотра.

Сейчас сделаю пример - покажу проблему наглядно. А то так не могу сформулировать)

[DjTarik]

Значит, такой пример. http://tarik.kasperovich.ru/test_14/index.html

Вообще - пишу лайтбокс. Сделал все полностью как и хотел. Работает везде, кроме IE.

Что конкретно не так:

- Функция центрирования.

Ситуация:

- кликаем по ссылке, затемняем документ с полосой прокрутки, если таковая имеется. Если нет - затемняем всю видимую область экрана.

- не закрывая окна сжимаем браузер (чтобы сработал 'onresize').

- везде все работает (т.е. затемненная область тоже сжимается) - в IE сразу появляется горизонтальная полоса прокрутки.

Т.е. если увеличивать ширину документа - все норм. Если уменьшать - не работает.

Не могу понять, что не так.

Конкретно, вот код, который за это отвечает:

onresize = function(){
	popup.centering();
}

centering: function(){
		if (this.keeper) {

			this.keeper.style.width = this.eclipse.style.width = '';
			this.keeper.style.height = this.eclipse.style.height = '';

			var elWidth = this.wrapper.offsetWidth+60;
			var elHeight = this.wrapper.offsetHeight+60;

			var screenWidth = document.documentElement.clientWidth;
			var screenHeight = document.documentElement.clientHeight;

			if (elWidth < screenWidth) {
				var posX = ((screenWidth-elWidth)/2)+this.shiftX;
			}
			else{
				var posX = this.shiftX;
			}
			if (elHeight < screenHeight) {
				var posY = ((screenHeight-elHeight)/2)+this.shiftY;
			}
			else{
				var posY = this.shiftY;
			}

			this.wrapper.style.left = posX+'px';
			this.wrapper.style.top = posY+'px';



			if (document.documentElement.clientWidth < document.documentElement.scrollWidth) {
				this.xScroll = true;
			}
			else{
				this.xScroll = false;
			}

			if (document.documentElement.clientHeight < document.documentElement.scrollHeight) {
				this.yScroll = true;
			}
			else{
				this.yScroll = false;
			}


			if (this.xScroll) {
				this.keeper.style.width = document.documentElement.scrollWidth+'px';
			}
			else{
				this.keeper.style.width = document.documentElement.clientWidth+'px';
			}

			if (this.yScroll) {
				this.keeper.style.height = document.documentElement.scrollHeight+'px';
			}
			else{
				this.keeper.style.height = document.documentElement.clientHeight+'px';
			}



			if ((elWidth+this.shiftX) > this.keeper.offsetWidth) {
				this.keeper.style.width = (elWidth+this.shiftX)+'px';
			}
			if ((elHeight+this.shiftY) > this.keeper.offsetHeight) {
				this.keeper.style.height = (elHeight+this.shiftY)+'px';
			}

			this.eclipse.style.width = this.keeper.offsetWidth+'px';
			this.eclipse.style.height = this.keeper.offsetHeight+'px';

		}

	},

Логика такая:

Т.к. попап уже создан - сбрасываю размеры затемненной области (чтобы не влияла на ширину документа при ресайзе).

Заново измеряю все размеры, отступы, смещения и т.д.

Проблема одна - IE не сбрасывает значение document.documentElement.scrollWidth.

Или я что-то не так делаю? O_o

Спасибо.

Edited February 8, 2011 by DjTarik

[Veseloff]

Честно говоря, я считаю, что это лишнее. Не, реально. Часто ли вы при просмотре интернетов «сжимаете-растягиваете» окно браузера? Я никогда. Думаю, что не стоит этим запариваться.

[DjTarik]

Честно говоря, я считаю, что это лишнее. Не, реально. Часто ли вы при просмотре интернетов «сжимаете-растягиваете» окно браузера? Я никогда. Думаю, что не стоит этим запариваться.

Ну, скажем так - это защита от того, если пользователь загрузит слишком широкую картинку. Типо панорамы. Хочу показать оригинальный размер и полосу прокрутки соответственно. Поэтому считаю идею нормальной.

Тем более, что только IE недоволен... =/

[Great Rash]

А зачем вообще что-то центрировать на onresize? Почему нельзя центрировать контент при помощи CSS? Так же быстрее работать будет.

Для затемнения, я бы сделал position: fixed; (для ИЕ эмуляция).

[DjTarik]

А зачем вообще что-то центрировать на onresize? Почему нельзя центрировать контент при помощи CSS? Так же быстрее работать будет.

Для затемнения, я бы сделал position: fixed; (для ИЕ эмуляция).

Потому что затемнять нужно область с полосами прокрутки (не хочу привязываться к верстке).

С центрированием проблем нету. Проблема - с затемнением и ресайзом затемнённой области.

[Great Rash]

Потому что затемнять нужно область с полосами прокрутки

не понял

[DjTarik]

не понял

ну, проблема в том, что затемнил я всё область видимую (если есть прокрутки - тоже затемнил: document.documentElement.scrollWidth)

Потом делаю браузер меньше (по ширине) - во всех браузерах сжимается - а в IE - нет. В IE появляется горизонтальная полоса прокрутки.

[Great Rash]

Так, еще раз спрощу, почему ширину области затемнения надо высчитывать скриптом обязательно? Почему нельзя сделать так:

.dark {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	background: #000;
	opacity: 0.5;
}

[DjTarik]

Так, еще раз спрощу, почему ширину области затемнения надо высчитывать скриптом обязательно? Почему нельзя сделать так:

.dark {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	background: #000;
	opacity: 0.5;
}

Будет фотогалерея с листанием фоток. Значит ширина будет меняться динамически от ширины фотки. Т.к. фон на абсолюте - и фотка - на абсолюте (причем никак друг с другом не завязаны) - фотка НЕ растянет затемнение. Как-то так. =)

[Great Rash]

Т.е. фотка может быть шире окна? Ну и что? Ну растянется при этом <body>, ну и затемнение шире тоже станет. т.к. width: 100%;

[DjTarik]

Т.е. фотка может быть шире окна? Ну и что? Ну растянется при этом <body>, ну и затемнение шире тоже станет. т.к. width: 100%;

Пойду проверю ещё раз)

Знаю, что делал так, но потом почему-то отказался...

P.S. Но вопрос был не по верстке)

И ещё - а как быть с высотой?

html и body то по 100%...

[Great Rash]

И ещё - а как быть с высотой?

html и body то по 100%...

Зачем? Я ж написал: top: 0; bottom: 0;

[DjTarik]

Зачем? Я ж написал: top: 0; bottom: 0;

Проверю, но, по идее, считать всё равно от боди будет...

[psywalker]

document.body.scrollWidth - попробуй для ИЕ

[DjTarik]

document.body.scrollWidth - попробуй для ИЕ

Проверял - ничего не меняется) У меня строгий доктайп - поэтому я пришёл к document.documentElement.clientWidth и document.documentElement.scrollWidth.

И это... Решил проблему)

Всё оказалось банально просто: IE просто не успевал пересчитать изменение ширины окна. Пока решил через минимальный setTimeout. Вот только не знаю, правильно ли)))

[Great Rash]

Use CSS Luke!