| |
|
|
| | Как выяснить абсолютные координаты слоя (div)?
Нашёл вот такой скрипт:
function getBounds(element)
{
var left = element.offsetLeft;
var top = element.offsetTop;
for (var parent = element.offsetParent; parent; parent = parent.offsetParent)
{
left += parent.offsetLeft - parent.scrollLeft;
top += parent.offsetTop - parent.scrollTop;
}
return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};
}
|
Он работает, но если FF и Opera выдают одинаковые результаты, то IE добавляет около десяти пикселов.
Изначально необходимо было запустить скрипт в зависимости от положения курсора на странице, так вот координаты курсора, во всех трёх браузерах отображаются одинаково! А границы слоя нет.
Как сделать кроссбраузерный вариант? | |
| |
|
|
| |
|
|
| |
для: Артём Дубин
(04.05.2008 в 13:58)
| | | Може для IE свою функцию. а потом эти две объединить через if ... else...? | |
| |
|
|
| |
|
|
| |
для: Артём Дубин
(04.05.2008 в 13:58)
| | | 1. Весьма нежелательно переменной давать имя свойства. А в данном скрипте как раз проактически только таковые имена - parent, left, top, element.
2. Абсолютные координаты вычисляются чуть проще, чем в приведенном скрипте - без использования scrollLeft и scrollTop.
3. Для MSIE обязательным является назначение объекту, координаты которого вычисляются, значение relative для свойства position, ибо по дефолту в MSIE это свойство имеет значение static (в том случае, разумеется, если значение relative или absolute для этого свойства уже не назначено ранее в коде).
В итоге:
function getBounds (elem)
{
elem.style.position = 'relative';
var ABSleft = ABStop = 0, obj = elem;
while (obj)
{
ABSleft += obj.offsetLeft;
ABStop += obj.offsetTop;
obj = obj.offsetParent;
}
return {left: ABSleft, top: ABStop, width: elem.offsetWidth, height: elem.offsetHeight};
}
|
| |
| |
|
|
| |
|
|
| |
для: PAT
(04.05.2008 в 19:32)
| | | То же самое, вот страничка,
<style type="text/css">
DIV {position: relative;}
BODY {overflow: auto;}
.div1 {
width: 120px;
overflow: hidden;
height: 25px;
margin-top: 2px;
}
.div2 {
position: absolute;
background-image: url(Image.gif);
background-position: center center;
width: 20px;
height: 100%;
top: 0px;
right: 0px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<div class="div1">
<div class="div3" >текст</div>
<div class="div2" onMouseOut="
|
если курсор вылез за пределы слоя - показать координаты курсора и мыши (сравнить их)
"></div>
</div>
</div>
</body>
</html>
|
эффект тот же самый - IE вычисляет неправильно! | |
| |
|
|
| |
|
|
| |
для: Артём Дубин
(05.05.2008 в 06:44)
| | | <style type="text/css"> body,html{padding:0;margun:0} | |
| |
|
|
