Форум

Skyman · #1 (**permalink**) 05.05.2011, 00:34

В JS полный новичек.

Необходимо для div'а присвоить высоту страницы.
Нашел 3 свойства:

document.body.clientHeight
document.body.scrollHeight
document.body.offsetHeight

Вопрос в том, как их вставить в html, т.е. чтобы получилось так:

<div class="myclass" style="height: *динамическая высота*px;"></div>

Aetae · #2 (**permalink**) 05.05.2011, 02:14

<html>
  <style type="text/css">
  *{margin:0;padding:0}
  html,body,div {height:100%}
  </style>
  <body>
    <div style="background:#aaf">
      Высота 100%
    </div>
  </body>
</html>

Маэстро · #3 (**permalink**) 06.05.2011, 12:44

Aetae, смотря что понимать под "высотой страницы".
style="height:100%" - это всё же высота вьюпорта броузера на мой взгляд. А высота страницы - это длина вертикального скроллера, какой бы он длинный не был (хоть 3000px), потому как всё, что мы видим в броузере - это и есть одна страница документа.

Skyman · #4 (**permalink**) 07.05.2011, 20:22

Aetae, дело в том, что я HTML/CSS знаю хорошо и, к сожалению, на нем нельзя реализовать мою задачу, она правда немного изменилась.

На странице есть ссылка на всплывающий div, у которого position: absolute, top: 200px

Для страницы, у которой немного информации, этот блок выглядит хорошо, но если страница сильно высокая (6000px), а ссылка на вызов поп-апа находится внизу, то этот блок не видно, т.к. пользователю придется скроллить страницу вверх.

Нужно следующее: *высота верхнего скролла*px + 200px и получившийся результат вставить для значения top
Чтобы получилось так: <div class="popup" style="top: XXXpx;"></div>

Нашел 3 параметра, отвечающий за скролл:
window.scrollY
window.pageYOffset
document.documentElement.scrollTop

P.S. значение position: fixed не подойдет, т.к. всплывающий div довольно большой по размеру.

subzey · #5 (**permalink**) 07.05.2011, 21:33

document.documentElement.clientHeight вернет высоту вьюпорта, но если только вёрстка под доктайпом.

В jQuery, кстати, (если Вы его используете) есть $(window).height()

Skyman · #6 (**permalink**) 08.05.2011, 21:54

Нашел скрипт, который реализует то, о чем я писал выше.

Но что нужно дописать в него, чтобы событие onclick срабатывало только один раз?

window.onload = function(){

var	wsize = windowWorkSize(),
	testElem = document.getElementById("popup_block"),
	testElemHei =  testElem.offsetHeight;

window.document.onclick = function(){
	testElem.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + 180 + "px";
};

function windowWorkSize(){
var wwSize = new Array();
	if (window.innerHeight !== undefined) wwSize= [window.innerWidth,window.innerHeight]
		else	
			{
				wwSizeIE = (document.body.clientWidth) ? document.body : document.documentElement; 
				wwSize= [wwSizeIE.clientWidth, wwSizeIE.clientHeight];
			};
	return wwSize;
};

};

Маэстро · #7 (**permalink**) 13.05.2011, 20:03

Сообщение от Skyman

Aetae, дело в том, что я HTML/CSS знаю хорошо и, к сожалению, на нем нельзя реализовать мою задачу...

На странице есть ссылка на всплывающий div, у которого position: absolute, top: 200px
Для страницы, у которой немного информации, этот блок выглядит хорошо, но если страница сильно высокая (6000px), а ссылка на вызов поп-апа находится внизу, то этот блок не видно, т.к. пользователю придется скроллить страницу вверх...

А зачем так сложно? И если пользователь двигает скроллер, то ведь Ваш блок уйдет с экрана?! (absolute, top: 200px)
Используйте CSS position:fixed

Форум

Справочник

Discord чат

Курсы javascript