CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

alvion Nybegynder

06. juni 2001 - 06:34 Der er 11 kommentarer og
1 løsning

top/left position på et div/span e.l. uden absolut positionering

Hvis jeg nu har følgende tag et eller andet sted i et html-dokument:

<div onclick=\"alert(this.offsetLeft);\">Bla bla</div>

Mit problem er bare, at offsetLeft er 0, og jeg kan tilsyneladende kun få den til at afgive en anden værdi, hvis jeg sætter div\'ens position til \"absolute\" og sætter en top/left position på (f.eks. style=\"position: absolute; left:50; top:40\")

Findes der ikke en måde at omgå dette, så jeg istedet bare får top/left koordinater at vide efter at Explorer har placeret div\'en?

Synes godt om

olebole Juniormester

06. juni 2001 - 12:57 #1

<ole>
Måske....prøv at skrive en URL til det fulde eksempel med en forklaring om, hvilket span det drejer sig om.
/mvh
</bole>

Synes godt om

jvh Nybegynder

06. juni 2001 - 15:08 #2

Problemet med offsetLeft er at den er relativ i forhold til \"parent\" elementet. Derfor har jeg lavet et par funktioner, der kan arbejde sig hele træet tilbage (De virker tilsyneladende også i netscape!!):

function posLeft(e) {
var i=e.offsetLeft;
if(e.offsetParent!=null) i+=posLeft(e.offsetParent);
return(i);
}
function posTop(e) {
var i=e.offsetTop;
if(e.offsetParent!=null) i+=posTop(e.offsetParent);
return(i);
}

Hvis du f.eks. tager fat i et element e:
e = document.all(\'mindiv\')
og kalder posLeft(e) - så får du den absolutte position på skærmen.
posTop(e) giver dig y positionen

Synes godt om

olebole Juniormester

06. juni 2001 - 15:11 #3

Men du vil stadig kun supportere Explorer...
/mvh

Synes godt om

alvion Nybegynder

06. juni 2001 - 17:01 #4

jhv -> Yup! Virker i Explorer... Kan man gøre noget tilsvarende i Netscape?

Synes godt om

jvh Nybegynder

06. juni 2001 - 17:08 #5

Det vil jeg da gætte på man kan! Jeg skal lige prøve at undersøge det -> nu prøver jeg ellers normalt at undgå netscape :-)

Hvilken version ønsker du at understøtte?

Synes godt om

olebole Juniormester

06. juni 2001 - 17:09 #6

Ikke i version 4.x. Der kan du intet foretage dig med lag, der ikke er absolute positioneret. Du kan simpelthen ikke kalde et relativt lag :o(
/mvh

Synes godt om

olebole Juniormester

06. juni 2001 - 17:10 #7

Hvorfor placerer du ikke bare dine lag absolute?

Synes godt om

alvion Nybegynder

06. juni 2001 - 18:27 #8

Fordi lagene udgør en \"topbjælke\" der er dynamisk genereret. Det betyder at jeg ikke kender bredden af hvert lag.

Synes godt om

olebole Juniormester

06. juni 2001 - 21:22 #9

Skal den første bjælke altid starte det samme sted?

Synes godt om

olebole Juniormester

06. juni 2001 - 22:36 #10

Prøv det her:

<html>
<head>
<script language=\"JavaScript\">

var numMen = 3; // Antal af menuer

var dom = document.getElementById ? true:false;
var ns4 = document.layers ? true:false;
var ie4 = document.all ? true:false;

function place() {
for (i=0; i<numMen; i++) {
obj = (dom)? document.getElementById(\"noget\"+i) : (ie4)? document.all[\"noget\"+i] : document.layers[\"noget\"+i];
objCSS = (ns4)? obj : obj.style;
if (i>0) {
obj1 = (dom)? document.getElementById(\"noget\"+(i-1)) : (ie4)? document.all[\"noget\"+(i-1)] : document.layers[\"noget\"+(i-1)];
objCSS.left = (ns4)? obj1.left+obj1.clip.width : parseInt(obj1.style.left)+parseInt(obj1.offsetWidth);
}
objCSS.visibility = \"visible\";
}
}
</script>
</head>
<body onload=\"place();\">

<div id=\"noget0\" style=\"position:absolute;left:50px;top:25px;background-color:#ff0000;visibility:hidden;\">noget0</div>
<div id=\"noget1\" style=\"position:absolute;top:25px;background-color:#ffff00;visibility:hidden;\">noget1</div>
<div id=\"noget2\" style=\"position:absolute;top:25px;background-color:#0000ff;visibility:hidden;\">noget2</div>

</body>
</html>

/mvh

Synes godt om

jvh Nybegynder

07. juni 2001 - 08:08 #11

Ovenstående ser da ud til at virke, hvis man antager at første div placeres yderst til venstre, og de flugter hinanden nøjagtigt. Det er det kun alvion der ved.

Med hensyn til at man kun kan arbejde med absolut positionering i Netscape 4.7 er det ikke helt rigtigt.

Det er korrekt at Inline styles skal være absolut positionerede, for at netscape overhovedet betragter dem, men der er heldigvis andre måder.

Hvis du benytter navngivne styles istedet, kan du godt anvende relative lag.
Det ser ud i retning af:

<STYLE TYPE=\"text/css\">

</STYLE>
<div id=\"myDiv\">Den her er relative</div>

Nu kan du godt få fat i (de relative) left/top attributterne v.h.a. document.layers[\'mydiv\'].left og document.layers[\'mydiv\'].top .

Alvion--> Hvis oleboles løsning er ok, vil jeg ikke gøre mere. Ellers må du lige sige til. Det kan også være ovenstående er nok til at du kommer videre i Netscape4.7?

Synes godt om

olebole Juniormester

09. juli 2001 - 21:42 #12

#myDiv {position:relative;left:0;top:0}
...vil nok - under alle omstændigheder - virke bedre =o)
/mvh

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS