Форум hotibo.ru

AKS написал:

kat
Вот здесь есть тема, загляните: Определение координат элемента на странице

))спасибо большое))хорошо быть экспертом;) вижу, к чему стремиться!)

AKS, подскажите, пожалуйста, обнаружился странный глюк- блок, поставлен в левый верхний край
#vvod_datw {
    width:100px;
    background: #f5deb3;
    border: solid 1px #000;
    font-size: 12px;
    font-weight: bold;
}
соответственно отступы у него ВСЕ равны нулю.
В таблице стилей в начале как водится
body, html {
    margin: 0px;
    padding: 0px;
    border: 0px;
    width:100%;
   height:100%;
}
при расчете координат вылезает какая то цифра 5. как если бы у  #vvod_datw был марджин-5 (ну или у любимой оперы- отступ) ??
не то чтобы хочется понять, за что разработчики браузеров ненавидят несчастных веб-мастеров, но такое качество как здоровое любопытство берет верх;)) помогите неразумной- подскажите-что это за радость?)))

AKS написал:

kat
Действительно "странный глюк", т.к. мне не удалось увидеть цифры 5 ни с doctype, ни без...

дело в том, что есть форма с полем:

           

               
               
           

           

               
               
           

стиль:
#vvod_datw {
    width:100px;
    padding-top:5px;
    padding-left:20px;
    background: #f5deb3;
    border: solid 1px #000;
    font-size: 12px;
    font-weight: bold;
}
.carrier_pole {
    float:left;
    display:inline;
    margin-bottom:10px;
}
#pole1,#pole2 {
    width:60px;
    height:10px;
    font-size: 10px;
}
относительно поля позиционируется блок, создаваемый динамически скриптом.
стиль блока:
#calendarContainer {
    position:absolute;
    background: #f5deb3;
    border: solid 1px #000;
    font-size: 12px;
    width: 165px;
}
то есть у него никаких отступов.
блок выставляется левым верхним углом в левый нижний угол поля (допустим, первого).
если посчитать сверху вниз-отступ#vvod_datwравен-5px плюс высота поля-10px +1px на бордер- итого 16.Ура!
а вот и нет- потому как чтобы сравнять края нужно писать не 16px, а -21!!!????????
blockElement.style.top = 21+'px';(blockElement и #calendarContainer- один и тот же блок).
вообще то у мня несклько другой трабл с расчетом координат, но вылезло еще и это счастье??
физически не выношу что то не понимать, поэтому буду крайне признательна, если поможете.
Конструктивная критика принимается))

AKS написал:

kat
У Вас позиционируется не за счет padding, а за счет высоты изображения, находящего с ним в одной строке...

высота изображения- 12px, где то еще потерялось 3 пиксела(
может у картинок по умолчанию что-нибудь выставляется- какие-то отступы?
с другой стороны, есть вот еще какая проблема:
я использую функцию, со страницыhttp://xpoint.ru/know-how/JavaScript/PoleznyieFunktsii?31#OpredelenieKoordinatYelementaN
/*функция получения координат и размеров элемента---------------------------------------------*/
    function getPositionData(element){
        var left = 0;
        var top = 0;
            for(var parent = element.offsetParent; parent; parent = parent.offsetParent){
                left+=parent.offsetLeft;
                top+=parent.offsetTop;
            }
    return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};   
    }

мой код-
    var divElementPole = document.getElementById(poleId);//получение поля формы по Id
    var tmpPositionDataPole = getPositionData(divElementPole);//вызов функции для поля
          alert(tmpPositionDataPole.left);
          var blockElement=document.getElementById(CalendarContainerId);//получение Id для позиционируемого блока.
         blockElement.style.left = tmpPositionDataPole.left;//выставляем ему left,блок position:absolute;
         alert(blockElement.style.left);

если у меня нет дополнительных отступов во вложенных блоках (их три)- все выводится ровно-блок выставляется левым краем по левому краю поля формы.
если только самой формы поменять марджин(не все же ей к краю окна то липнуть!) - смещение динамического блока увеличивается в три раза, алерты на марджин 20-показывают смещение-60.
то есь в цикле марджин чтоли еще плюсуется?

AKS, спасибо за поддержку))
мне нужно было выставить динамический блок в конкретную координату, зависящую от координат поля формы(так желает Босссс!), точнее в левый нижний угол инпута- левый верхний угол блока.
я надеялась получить ее через функцию getPositionData(element).смысл в том чтобы не ограничивать вложенность блоков, несущих форму с полем, и для любого количества блоков получить правильный оффсет поля. я надеялась на основании этого значения высчитать точку позиционирования для своего детища))-того самого разнесчастного блока. Но марджины  с 30-градусной жарой доканали мой мозг))) этот проклятый отступ умножается на количество вложенных блоков- обнаружила через алерты.
а вы, батенька, говорите))) по сравнению со мной- вы именно что- эксперт))

AKS написал:

kat
А что не получается? Вы ведь все правильно делаете:

Код:

  var divElementPole = document.getElementById("poleId");
  var tmpPositionDataPole = getPositionData(divElementPole);
  var blockElement=document.getElementById("CalendarContainerId");
  blockElement.style.top = tmpPositionDataPole.top + tmpPositionDataPole.height;
  blockElement.style.left = tmpPositionDataPole.left;

Блок CalendarContainerId всегда будет там, где нужно вашему боссу...

говоря великим русским языком- фигос(((

AKS, не будет большой наглостью- прислать Вам мой код посмотреть?
я понимаю, что чужой код читать - то еще счастье, особенно искать в нем трабл, но профессионалам обычно видно явные ошибки.
нет- так нет- что же - я пойму)) окучить такое количество новичкофф невозможно физически. Спасибо еще раз за поддержку)

kat
А мне Ваш скрипт-то зачем? У Вас ведь там с позиционированием формы чего-то не то, похоже...
Но если что, я там установил в настройках показ e-mail - шлите архив...

kat
Ладно, подождем e-mail...

AKS, совсем забыла- смотреть надо в опере))
IE - это отдельное веселье)

AKS написал:

kat
А почему в Opera?

да можно где угодно, но в опере больше похоже на конечный результат))) надеюсь, что пока что))

AKS написал:

kat
Вы будете сильно удивлены, но у меня все OK! За исключением того, что в FF второй календарь появляется на уровне первого ...

вово, тока теперь попробуйте добавить в стилях в #vvod_datwнапримерmargin-left:20px;
всего доброго)

kat
В функции getPositionData в самом начале перепишите вот так:

var left = element.offsetLeft;
var top = element.offsetTop;

AKS, доброе утро, я вот на свежую голову глядю с утра- у меня в трех браузерах- выглядит все по-разному- в IE - как ни странно- блок встает правильно, в FF - просто игнорирует скрипт, а в опере- сдвигает вправо и вниз на ширину добавляемого марджина?
Как же мне их ловко победить?(