[javascript] offsetTop van id a aan id b geven

[Verwijderd]

Hoi iedereen,

Ik probeer een popin op dezelfde hoogte te laten verschijnen als de bijhorende <li >.
nu vind ik al met javascript de juiste hoogte, maar ze toepassen op mijn popin lukt nog niet en ik heb geen idee hoe dit te fixen. Kan er iemand mij een kleine aanzet geven?

PHP:

    //popin in login
    print '<div class="popin" id="popin" style="display: none"></div>';     

    
    // keeps getting the next row until there are no more to get.
    while($db_table_row = mysql_fetch_array($result)) {

    //linksdiv= markering voor sajax
    print '<li id="linksDiv_'.$db_table_row['id'].'" class="liLinksLogin">';    

    //X-verwijderknop 
    print '<a class="xLinks" onclick="showAdDeleteLinks('.$db_table_row['id'].');return false;"><img class="wijsvinger" src="/img/delete.png" title="Delete"></a>';

    //naam vd link
    print '<div id="nameIt_'.$db_table_row['id'].'">'.$db_table_row['name'].'</div></li>';
    
}

JavaScript:

function showAdDeleteLinks(idDelete)
{
    if(POP_IN == false) {
    POP_IN = true;
    
    linksDiv = document.getElementById('linksDiv_'+idDelete);
    //geeft de correcte hoogte:
    alert(linksDiv.offsetTop);
    
    nameIt = document.getElementById('nameIt_'+idDelete).innerHTML;
    popin = document.getElementById("popin");
    
    
    //deze leek mij logisch, maar werkt dus niet:
    //popin.offsetTop = linksDiv.offsetTop;
    
    popin.style.display = 'block';

    popin.innerHTML='<div id="popinTitle"><div id="popinIcon"><img src="/img/delete.png" title="Delete"></div>Delete Link: <span class="contactHeader">'+nameIt+'</span>&nbsp;?</div><div onclick="submitDeleteLinks('+idDelete+')" id="popinYes"></div><div onclick="closePopin(\'popin\')" id="popinNo"></div>';
  
    }
}

JavaScript:

    //deze leek mij logisch, maar werkt dus niet:
    popin.offsetTop = linksDiv.offsetTop; 

Op het moment ziet de css van popin er zo uit:
(ik heb top:50% weggehaald omdat het toch de bedoeling is dat die met js geset wordt.

Cascading Stylesheet:

.popin
{

    left:50%;
    display: none;

    position: absolute;
    z-index: 6;
    width: 350px;
    height: 180px;
    margin-left: -100px;
    margin-top: -40px;
    border-style: none;
    background-image: url('../img/popin.png');
}

alvast bedankt voor jullie hulp en tijd !!!

[Verwijderd]

offsetTop is read-only. Je moet gebruiken: popin.style.top = linksDiv.offsetTop + 'px';
Eventueel natuurlijk corrigeren.

[Verwijderd]

wow, jij hebt je naam niet gestolen zeg. Binnen de 3 minuten deze keer...

En dat is idd wat ik zocht. hartelijk dank !!

[Verwijderd]

Hmm, het werkt perfect in FF, opera en safari. Behalve in IE6 en 7 krijg ik meteen een js error. Wat ik zeker ga doen is een webdevelloperstoolbar voor IE zoeken, daarmee hoop ik te weten te komen wat hij nu eigelijk wil.

Ik heb het zo aangepast. Voorts heb ik wat ik al vermeld heb, niet moeten wijzigen.

JavaScript:

function showAdDeleteLinks(idDelete)
{
    if(POP_IN == false) {
    POP_IN = true;
    
    linksDiv = document.getElementById('linksDiv_'+idDelete);
    popin = document.getElementById("popin");   
    nameIt = document.getElementById('nameIt_'+idDelete).innerHTML;
    
    //alert(linksDiv.offsetTop);

    //popin de hoogte van de linksDiv geven
    popin.style.top = linksDiv.offsetTop +'px';
    
    popin.style.display = 'block';

    popin.innerHTML='<div id="popinTitle"><div id="popinIcon"><img src="/img/delete.png" title="Delete"></div>Delete Link: <span class="contactHeader">'+nameIt+'</span>&nbsp;?</div><div onclick="submitDeleteLinks('+idDelete+')" id="popinYes"></div><div onclick="closePopin(\'popin\')" id="popinNo"></div>';
  
    }
}

[ Voor 1% gewijzigd door Verwijderd op 03-09-2008 04:31 . Reden: zinsbouw ]