Avatar billede webcreator Nybegynder
27. marts 2005 - 00:56 Der er 10 kommentarer og
1 løsning

Placér element i forhold til link

Hej Eksperter.

Jeg er ved at bygge en menu i CSS/JavaScript. Jeg ville gerne vide, hvordan jeg kan placere en ny boks (som fremkommer ved mouseOver på mit link), således at den optræder under mit link. - Tak :)
Avatar billede webcreator Nybegynder
27. marts 2005 - 03:16 #1
Jeg har fundet flg. som virker. Jeg er dog ikke helt klar over hvad der sker. Er der nogen der kan forklare det? Det må også kunne gøres mere simpelt.

function PosX(obj) {
    var posLeft = 0;
   
    if (obj.offsetParent) {
        while (obj.offsetParent)
        {
            posLeft += obj.offsetLeft
            obj = obj.offsetParent;
        }
    } else if (obj.x) {
        posLeft += obj.x;
    }
     
    return posLeft;
}

function PosY(obj) {
    var posTop = 0;
   
    if (obj.offsetParent) {
        while (obj.offsetParent)
        {
            posTop += obj.offsetTop
            obj = obj.offsetParent;
        }
    } else if (obj.y) {
        posTop += obj.y;
    }
     
    return posTop;
}

function Pos(obj)
{
    var X = PosX(obj);
    var Y = PosY(obj);
    alert(X + ", " + Y);
}
Avatar billede roenving Novice
27. marts 2005 - 10:59 #2
Det kan i hvert fald gøres mere komprimeret:

function getPos(elm) {//jumper
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}

function Pos(obj)
{
    var pos = getPos(obj);
    alert(pos.x + ", " + pos.y);
}

-- og det der sker i begge tilfælde er, at man tager fat i element, finder dets relative position lodret og vandret, finder et evt. omkransende element, adderer dets position til osv. !-)
Avatar billede webcreator Nybegynder
27. marts 2005 - 14:24 #3
Hej Roenving.

Fandt faktisk det samme eksempel i et andet indlæg - men tak for det.
Hvorfor laver man en løkke?
Avatar billede roenving Novice
27. marts 2005 - 14:26 #4
Fordi man jo ikke ved hvor mange lag, der er af offsetParents !-)
Avatar billede webcreator Nybegynder
27. marts 2005 - 14:30 #5
Jeg har lavet en anden version der ikke benytter en løkke :

function showmenu(elmnt, obj) {
  document.getElementById(elmnt).style.left = obj.offsetLeft+'px';
  document.getElementById(elmnt).style.top = obj.offsetTop+20+'px';
  document.getElementById(elmnt).style.visibility="visible";
}

(her er det en funktion der viser og positionerer en under-menu)
Avatar billede roenving Novice
27. marts 2005 - 14:33 #6
Kan også ganske udmærket bruges, hvis man ved, at der ikke er andre offsetParents end body/documentElement !-)

-- men hvis du nu finder på at placere kalorius inde i et positioneret element, må du den anden vej !o]
Avatar billede webcreator Nybegynder
27. marts 2005 - 14:45 #7
Ah, ok :)
Avatar billede webcreator Nybegynder
28. marts 2005 - 16:34 #8
Vil du have points, Roenving ? :)
Avatar billede roenving Novice
28. marts 2005 - 16:37 #9
Oki '-)
Avatar billede webcreator Nybegynder
28. marts 2005 - 16:45 #10
:)
Avatar billede roenving Novice
28. marts 2005 - 16:51 #11
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

IT-JOB
Seneste spørgsmål Seneste aktivitet
I går 10:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging