Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.03.2009, 13:28
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Определение координат body.
Имеется такая страница:
<html>
<head>
    <style type="text/css">
        body {
            margin: 10% auto;
            width: 500px;
            border: 1px solid #000;
            }
    </style>
</head>
<body> <br><br><br><br><br><br></body>
</html>

Нужно определить координаты body. В браузерах, где есть getBoundingClientRect проблем нет, в остальных проблемы, т.к. начало координат находится в body, и, в зависимости от браузера, координаты равны или 0, или минус borderWidth, или реальная позиция (но это в ИЕ, а там проблем и так нет). Как определить позицию body в пикселях?
Ответить с цитированием
  #2 (permalink)  
Старый 26.03.2009, 15:32
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

я думаю никак...
Ответить с цитированием
  #3 (permalink)  
Старый 27.03.2009, 19:59
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Цитата:
т.к. начало координат находится в body
а чье начало координат там находится?
Ответить с цитированием
  #4 (permalink)  
Старый 28.03.2009, 12:33
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Координаты верхнего левого угла <body> нам могут понадобится, когда body.style.position == 'static', так? Значит в Standards Compliance Mode у нас relative-блоком будет <html>, не смотря на то, что documentElement.style.position тоже будет static. Попробуем добавить в body новый блок и определеить его положение:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>body offsets</title>
<style type="text/css">
html {
background: #ccf;
}
body {
width: 500px;
margin: 10% auto;
padding: 20px;
border: 10px solid #fff;
background: #ffc;
}
.rect {
position: absolute;
width: 100px;
height: 100px;
background: #000;
}
</style>
<script type="text/javascript">
function bodyOffsets() {

	var top = 0;
	var left = 0;

	var doc = document;
	var body = doc.body;

	var ie = /*@cc_on!@*/false;
	var opera = window.opera && window.opera.version;
	var standards = doc.compatMode === 'CSS1Compat';

	var node = doc.createElement('div');
	var style = node.style;

	style.position = 'static';
	style.margin = '0';
	style.padding = '0';
	style.border = 'none';
	style.width = 'auto';
	style.height = '0';
	style.float = 'none';

	var computedStyle = ie ? function(node) {
		return node.currentStyle;
	} : function(node) {
		return doc.defaultView.getComputedStyle(node, null);
	};

	style = computedStyle(body);

	if(standards) {
		if(node.getBoundingClientRect) {
   		// IE, Firefox 3, Opera 9.5, Google Chrome 2
		}
		else {
			// Firefox 2, Opera 9, Safari
			if(style.position == 'static') {
				body.insertBefore(node, body.firstChild);
				top = node.offsetTop - (parseInt(style.paddingTop) || 0);
				left = node.offsetLeft - (parseInt(style.paddingLeft) || 0);
				if(opera) {
					top -= parseInt(style.borderTopWidth) || 0;
					left -= parseInt(style.borderLeftWidth) || 0;
				}
				body.removeChild(node);
			}
			else {
				// …
			}
		}
	}
	else {
		// …
	}
	return {top: top, left: left};
}
window.onload = function() {
	var pos = bodyOffsets(), node = document.createElement('div');
	node.className = 'rect';
	node.style.top = pos.top + 'px';
	node.style.left = pos.left + 'px';
	document.body.appendChild(node);
};
</script>
</head>
<body>
	<div style="height:200em;"></div>
</body>
</html>

Проблема существовала в Firefox 2, Opera 9 и Safari. Для Standards Compliance Mode вроде бы решено давайте теперь остальные варианты доделаем?)

Последний раз редактировалось Octane, 28.03.2009 в 12:47.
Ответить с цитированием
  #5 (permalink)  
Старый 28.03.2009, 12:51
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от x-yuri
а чье начало координат там находится?
Всего и вся. Все лежит в body, а у него position: relative. Это я указать забыл.

Сообщение от Octane
Координаты верхнего левого угла <body> нам могут понадобится, когда body.style.position == 'static', так?
Нет, мне интересен как раз противоположный вариант.
В общем случае задача выглядит так. Необходимо установить элемент в позицию x,y относительно экрана, а у body стоит relative и он сдвинут, поэтому его смещение нужно вычесть из начальных координат. На html-код влиять нельзя, т.к. сайты не мои и их тысячи.

Сафари, в принципе, возвращает нормальные числовые значения marginLeft и marginTop, поэтому почти для всех браузеров задача решена, но не для всех.
Ответить с цитированием
  #6 (permalink)  
Старый 28.03.2009, 14:05
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Если что-то вывести требуется по клику, то можно взять event.pageX и вычесть event.target.offsetLeft (ну или более сложный расчет offsetLeft/offsetTop через offsetParent), как раз получится смещение body. Opera 9 и Firefox 2 поддерживают pageX/pageY. Других способов пока не придумал :-)

-----------------
В Opera есть еще метод document.elementFromPoint, с помощью него можно найти <body>, но это наверное слишком тормозной способ будет…

Последний раз редактировалось Octane, 28.03.2009 в 15:16.
Ответить с цитированием
  #7 (permalink)  
Старый 28.03.2009, 15:50
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Всетаки сделал через elementFromPoint в Opera, вроде не тормозит, и в Safari через margin, осталось придумать что делать с Firefox 2, а еще и QuirksMode надо рассмотреть :wacko:
Вложения:
Тип файла: zip body-relative-offsets.zip (1.4 Кб, 2 просмотров)
Ответить с цитированием
  #8 (permalink)  
Старый 28.03.2009, 16:47
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Octane
Если что-то вывести требуется по клику
Нет, не по клику, это было бы слишком просто для создания темы

Сообщение от Octane
Всетаки сделал
Я это в понедельник гляну, щас никак
Ответить с цитированием
  #9 (permalink)  
Старый 30.03.2009, 19:22
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Ну что есть идеи как победить Firefox 2? :rolleyes:
Ответить с цитированием
  #10 (permalink)  
Старый 30.03.2009, 19:33
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Octane
Ну что есть идеи как победить Firefox 2?
Мне тоже интересно У меня пока нет
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Определение свойств стиля в javascript, если в CSS он задан особым образом SunnyDay Общие вопросы Javascript 13 13.03.2010 19:09
Определение количества плагинов Александр 2009 Общие вопросы Javascript 19 26.03.2009 00:41
IE6 и определение размеров ВСЕГО документа jestalnar Общие вопросы Javascript 1 02.02.2009 11:05
Определение активности окна браузера Dextrum Events/DOM/Window 2 23.07.2008 13:58
Не просто определение типа браузера... Driver86 Общие вопросы Javascript 6 08.04.2008 21:35