26.03.2009, 13:28
|
|
Новичок на форуме
|
|
Регистрация: 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 в пикселях? |
|
26.03.2009, 15:32
|
|
Флудер
|
|
Регистрация: 25.07.2008
Сообщений: 1,271
|
|
|
я думаю никак...
|
|
27.03.2009, 19:59
|
 |
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Цитата:
|
|
т.к. начало координат находится в body
|
а чье начало координат там находится? |
|
28.03.2009, 12:33
|
|
|
|
Регистрация: 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.
|
|
28.03.2009, 12:51
|
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
|
Сообщение от x-yuri
|
|
а чье начало координат там находится?
|
Всего и вся. Все лежит в body, а у него position: relative. Это я указать забыл.
|
Сообщение от Octane
|
|
Координаты верхнего левого угла <body> нам могут понадобится, когда body.style.position == 'static', так?
|
Нет, мне интересен как раз противоположный вариант.
В общем случае задача выглядит так. Необходимо установить элемент в позицию x,y относительно экрана, а у body стоит relative и он сдвинут, поэтому его смещение нужно вычесть из начальных координат. На html-код влиять нельзя, т.к. сайты не мои и их тысячи.
Сафари, в принципе, возвращает нормальные числовые значения marginLeft и marginTop, поэтому почти для всех браузеров задача решена, но не для всех. |
|
28.03.2009, 14:05
|
|
|
|
Регистрация: 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.
|
|
28.03.2009, 15:50
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
|
Всетаки сделал через elementFromPoint в Opera, вроде не тормозит, и в Safari через margin, осталось придумать что делать с Firefox 2, а еще и QuirksMode надо рассмотреть :wacko:
|
|
28.03.2009, 16:47
|
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
|
Сообщение от Octane
|
|
Если что-то вывести требуется по клику
|
Нет, не по клику, это было бы слишком просто для создания темы
|
Сообщение от Octane
|
|
Всетаки сделал
|
Я это в понедельник гляну, щас никак  |
|
30.03.2009, 19:22
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
|
Ну что есть идеи как победить Firefox 2? :rolleyes:
|
|
30.03.2009, 19:33
|
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
|
Сообщение от Octane
|
|
Ну что есть идеи как победить Firefox 2?
|
Мне тоже интересно У меня пока нет  |
|
|
|
