Сабж... Любого элемента, формы, картинки, слоя, таблицы ... разумеется обладающего ID... Т.е. кроме его ID, не известно, где на странице он раположен (а иногда и браузеры коверкают дизайн)...
Добавлено @ 01:53
Оч... нужно. Желательно код (без раницы под какой браузер, сам дальше разрулю)...
Спасибо

Так можно:

Код

function getPosition(obj) { var x=0, y=0; while(obj) {    x+=obj.offsetLeft;    y+=obj.offsetTop;    obj=obj.offsetParent; } return {x: x, y:y}; }

Но IMHO немного изврат напоминает, может задачу лучше опишешь, возможно без всяких корректировок позиций элементов обойдемся.

Не а... Слои выставляются яваскриптом, подгружаемым в дизайн сайта. В зависимости от наполнености контентом эта вставка меняет своё положение на странице (в ней есть как таблицы с картинками, так и слои) и если с таблицами и картинками ничего не случится, то слои "уплывают"... вот я и хочу привязать их к конкретным элементам.

Ну по любому координаты x/y ты кодом выше получишь.

Цитата(dr @ 20.8.2004, 01:15)

вот я и хочу привязать их к конкретным элементам

Вот это не совсем понял... как привязать?

Т.е. я буду вычислять координаты слоя, по полученным координатам данного элемента..

Цитата(Sardar @ 20.8.2004, 16:38)

Ну по любому координаты x/y ты кодом выше получишь.

Т.е.? на сколько выше и в каких браузерах, чтобы можно было ввести поправку на погрешность...

dr.ZmeY по моему мы друг друга не понимаем

В свойствах offset(Left|Top) хранится смещение обьекта относительно предка offsetParent, у предка в свою очередь тоже есть предок и т.д. Таким образом ты можешь вычислить положение любого элемента относительно другого элемента. Просматривать нужно до элемента HTML. Узнать на каком теге мы сейчас можно через элемент.nodeName

Теперь конкретней что нужно(если еще нужно ), по заданному обьекту узнать его слой и координаты слоя?

Код

<!-- несущий слой, промаркирован классом container --> <div class="container"><table><tr><td id="test">Hoi</td></tr></table></div> <script language="Javascript" type="text/javascript"> <!-- //функция возвращает несущий слой и его координаты по заданному элементу function getPlatf(obj) { while(obj&&!(obj.nodeName=="DIV"&&obj.className=="container")) obj=obj.parentElement; if(!obj) return null; var x=0, y=0, tg=obj; while(obj) {   x+=obj.offsetLeft;   y+=obj.offsetTop;   obj=obj.offsetParent; } // возвращаем обьект в полях которого: target - несущий слой, x/y - координаты return {target: tg, x: x, y:y}; } var r=getPlatf(document.getElementById("test")); //вычислим для ячейки таблицы alert(r.target.nodeName+", "+r.x+", "+r.y); //--> </script>

Эх, жаль нет в ИЕ у элементов свойств .x и .y как в Gecko, с координатами относительно HTML. Ну да ладно. Спасибо за код, Sardar, задействую его под ИЕ, а то уж хотел события генерить, чтоб получить координаты. Я сначала тоже мыслил в направлении твоего решения, но потом здался, как заметил некую путаницу в размерах, а видать надо offsetParent применять было. Как раз про него я и не знал. Ну а репа, а репа потом, сегодня уже репил

Цитата

как заметил некую путаницу в размерах, а видать надо offsetParent применять было.

Я точно не помню, но по моему offsetParent был придуман до CSS'овского box model. Поле указывает напервый внешний блочный элемент с релативной позицией, от которого отсчитываються координаты текущего элемента. Обычно это body.

Цитата

Ну а репа, а репа потом, сегодня уже репил smile

Пысыб большой, из-за тебя у меня репа в небеса взлетела, другим участникам сложнее будет догнать, пора бы сбросить темпы

Я слово дал, как сотню наберу все репы раздам, никого не забуду. Я ж не виноват, что твоих столько набралось, все по справедливости (хотя мож действительно надо было учебник почитать)
В неоплатном долгу перед тобой и Aliance. До сих пор в себя прейти не могу, как все класно получилось сделать!!!

Это сообщение отредактировал(а) Иль - 10.7.2005, 23:58

Минуточку, я хочу уточнить.
А что, нельзя пользоваться без offsetParent, а используя только offsetTop и все, например: .offsetTop + .perentNode.offsetTop + ... и так до body, где .perentNode=null. Вот у меня так чего-то не получалось, правда

Это сообщение отредактировал(а) Иль - 13.7.2005, 12:10

Нет нельзя, offsetParent и parentNode это два разных понятия.
parentNode это родительский элемент, то куда наша нода вложенна. offsetParent это первый элемент от которого считаються координаты. Если ты не использовал элементов на релативной позиции, то весь документ будет иметь offsetParent = body.

Идея offsetParent в том, что сдвигая элемент который для других элементов являеться offsetParent'ом, ты автоматом сдвигаешь всех. Обычно всякие менюшки вкладывают в слои с релативной позицией, дабы координаты не расчитывать, а ставить в left: 0, top:0

Считая координаты от parentNode ты должен был получать огроменные результаты

Цитата(Sardar @ 13.7.2005, 15:44)

сдвигая элемент который для других элементов являеться offsetParent'ом, ты автоматом сдвигаешь всех

Слушай, Sardar, это СУПЕР!!!!!!!!!!!!!
Сразу мысли забурлили в голове

Цитата(Sardar @ 13.7.2005, 15:44)

Считая координаты от parentNode ты должен был получать огроменные результаты

Ага, просто обалденные

Цитата

Слушай, Sardar, это СУПЕР!!!!!!!!!!!!!

На этом примере думаю будет ясно как это на практике

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>     <title>Galaxy - test</title> <style type="text/css"> #flycont {   position: absolute;   width: 40%;   height: 20%;   border: solid 1px navy; } #ct {   position: relative;   width: 100%;   height: 100%; } .shp {  position: absolute;  border: 1px solid navy;  width: 20px;  height: 20px; } </style> <script type="text/javascript"> function mdown(e) {   this.dragging=true;   this.offX=(window.event? window.event.offsetX: e.layerX)+3;   this.offY=(window.event? window.event.offsetY: e.layerY)+3;   var evt=window.event? window.event: e;   if(evt.stopPropagation) evt.stopPropagation();   evt.cancelBubble=true; } function mup() {   this.dragging=false;   var evt=window.event? window.event: e;   if(evt.stopPropagation) evt.stopPropagation();   evt.cancelBubble=true; } function mmove(e) {   if(!this.dragging) return false;   var evt=window.event? window.event: e;   var x=0, y=0, ofp=this.offsetParent;   while(ofp!=null) {     x+=ofp.offsetLeft;     y+=ofp.offsetTop;     ofp=ofp.offsetParent;   }   this.style.left=(document.body.scrollLeft+evt.clientX-this.offX-x)+"px";   this.style.top=(document.body.scrollTop+evt.clientY-this.offY-y)+"px";   if(evt.stopPropagation) evt.stopPropagation();   evt.cancelBubble=true;   return true; } function minit(o) {   o.onmousedown=mdown;   o.onmouseup=mup;   o.onmousemove=mmove;   o.onselectstart=function(){return false;}; } </script> </head> <body> <div id="flycont"><div id="ct"></div></div> <script type="text/javascript"> <!-- minit(document.getElementById("flycont")); var c=document.getElementById("ct"); var row=c.offsetHeight; var cc=0, cl=0, r=false; while((row-=25)>0) {   cl=-20; cc++; r=true;   while((cl+=25+(cc%2&&r? 10: 0))<c.offsetWidth-20) {     r=false;     var sh=document.createElement("SPAN");     sh.className="shp";     sh.style.left=cl+"px";     sh.style.top=row+"px";     sh.style.backgroundColor=((cl+cc)%2? "red": "blue");     c.appendChild(sh);     minit(sh);  } } //--> </script> </body> </html>

Хватаем мышью за любые квадратики и тащим куда угодно. Затем тащим рамочку, наблюдаем за эффектом.

Звыняюсь под Оперой скорее всего не будет работать, у всех трё типов браузеров(ИЕ, Опера, Мозилла) по разному координаты высчитываються, а Оперы под рукой нет что бы проверить и фиксить.

Цитата(Sardar @ 13.7.2005, 19:52)

if(evt.stopPropagation) evt.stopPropagation();   evt.cancelBubble=true;

Sardar, почему не пользуешся только cancelBubble, из-за правил хорошего тона ?
Добавлено @ 20:10

Цитата(Sardar @ 13.7.2005, 19:52)

function mup() {

35 строка пропустил аргумент функции e
Опять ты мне шикарную идею подкинул!!! Спасибо большое за пример
Добавлено @ 20:12
Жаль в Gecko все работает с тормазами, но это можно поправить размерами элементов