Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.05.2011, 00:34
Аспирант
Отправить личное сообщение для Skyman Посмотреть профиль Найти все сообщения от Skyman
 
Регистрация: 05.05.2011
Сообщений: 32

Высота страницы
В JS полный новичек.

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

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

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

<div class="myclass" style="height: *динамическая высота*px;"></div>
Ответить с цитированием
  #2 (permalink)  
Старый 05.05.2011, 02:14
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,565

<html>
  <style type="text/css">
  *{margin:0;padding:0}
  html,body,div {height:100%}
  </style>
  <body>
    <div style="background:#aaf">
      Высота 100%
    </div>
  </body>
</html>
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 06.05.2011, 12:44
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Aetae, смотря что понимать под "высотой страницы".
style="height:100%" - это всё же высота вьюпорта броузера на мой взгляд. А высота страницы - это длина вертикального скроллера, какой бы он длинный не был (хоть 3000px), потому как всё, что мы видим в броузере - это и есть одна страница документа.
Ответить с цитированием
  #4 (permalink)  
Старый 07.05.2011, 20:22
Аспирант
Отправить личное сообщение для Skyman Посмотреть профиль Найти все сообщения от Skyman
 
Регистрация: 05.05.2011
Сообщений: 32

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 довольно большой по размеру.

Последний раз редактировалось Skyman, 07.05.2011 в 20:25.
Ответить с цитированием
  #5 (permalink)  
Старый 07.05.2011, 21:33
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

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

В jQuery, кстати, (если Вы его используете) есть $(window).height()
Ответить с цитированием
  #6 (permalink)  
Старый 08.05.2011, 21:54
Аспирант
Отправить личное сообщение для Skyman Посмотреть профиль Найти все сообщения от Skyman
 
Регистрация: 05.05.2011
Сообщений: 32

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

Но что нужно дописать в него, чтобы событие 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
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

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

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Высота страницы по высоте окна браузера Николян (X)HTML/CSS 4 16.01.2014 20:12
Загрузить элементы документа с другой страницы alexrussia Events/DOM/Window 10 25.03.2011 10:17
Высота страницы (не окна). ostwest Events/DOM/Window 7 07.01.2011 21:34
Вычисление высоты страницы. keysi_ Events/DOM/Window 2 03.08.2010 18:03
Высота фрейма и высота загружаемого файла findman Events/DOM/Window 5 15.09.2008 03:33