CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede oergaard Nybegynder
30. december 2008 - 19:50 Der er 8 kommentarer og
1 løsning

Hhv. venstre og top position af <span></span> ved mouseOver

Jeg har en menu der oprettes dynamisk. Bredden på hvert element sættes ud fra tekstens længde. (padding: 5px).

Hvordan kan jeg via JS aflæse positionerne, så jeg kan lave en drop-down?
Avatar billede chrisbookwood Nybegynder
31. december 2008 - 15:49 #1
Når du placere et element med position:absolute inde i f.eks. en <div> med position:relative, vil elementet blive placeret efter hvor parent-elementet er. Så når du f.eks. sætter top:50px på elementet med position:absolute, vil det element blive sat 50px under toppen af parent-elementet, og ikke 50px fra toppen af hele siden, som position:absolute normalt gør.
Avatar billede chrisbookwood Nybegynder
31. december 2008 - 15:51 #2
Du kan få en bedre forklaring under overskriften ABSOLUTE POSITIONING på http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute
Avatar billede tjens Nybegynder
02. januar 2009 - 22:51 #3
Du kan aflæse aktuel skærmposision med getBoundingClientRect()

Testeksempel:

<html>
<head>
<title>Show a span's position</title>
<style>
#testSpan1 { color: orange; cursor: pointer;}
#testSpan2 { color: red; cursor: pointer;}
</style>
<script type="text/javascript">
function showPosition(obj) {

    alert ( 'object left, right, top, bottom: ' +
        '\n' + obj.getBoundingClientRect().left +
        '\n' + obj.getBoundingClientRect().right +
        '\n' + obj.getBoundingClientRect().top +
        '\n' + obj.getBoundingClientRect().bottom
    )
}
</script>
</head>

<body>
<h1>Show a span's position</h1>
<p>Click the colered spans: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phase<span id='testSpan1' onclick='showPosition(this)'>llus a nun</span>c varius nibh semper porttitor. Aliquam ornare. Aliquam tempor pede eu orci.
Maecenas non risus a<span id='testSpan2' onclick='showPosition(this)'>t felis fringil</span>la gravida. Phasellus sit amet sem.
</p>
</body>
</html>
Avatar billede chrisbookwood Nybegynder
02. januar 2009 - 23:10 #4
Men det er en unådig omvej når det kommer til dropdown menuer og sådanne.
Avatar billede roenving Novice
03. januar 2009 - 12:17 #5
Den gode bruger, jumper, lavede engang en rasende simpel funktion til at aflæse positioner:

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}
}

-- og f.eks. coolmenus, der bruges her på sitet bruger en variant af dette til at få de dropdowns her til at fungere !o]

-- og jeg er stærkt i tvivl om, hvilke browsere, der understøtter getBoundingClientRect !-)
Avatar billede oergaard Nybegynder
06. januar 2009 - 08:23 #6
Så er jeg på banen igen.
Avatar billede oergaard Nybegynder
06. januar 2009 - 08:33 #7
for læringens skyld kunne jeg godt tænke mig at udvikle noget i stil med coolmenus. Kender i evt. til nogle bøger / online materiale, som kan hjælpe.
Avatar billede olebole Juniormester
06. januar 2009 - 13:14 #8
<ole>

getBoundingClientRect understøttes i hvertfald af IE, FF og Opera - omend der vist har været lidt buggyness i Opera

/mvh
</bole>
Avatar billede oergaard Nybegynder
09. februar 2010 - 12:46 #9
lukker
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Åbne en PDF fil fra en mappe Af mbl i JavaScript 4 I går 16:52 I går 20:09
Spørgsmål til cookies Af Mads i JavaScript 1 14/02/202511:47 14/02/202512:07
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 16:53 Mac book pro fra 2019-2023 Af BRJ i Mac
I dag 16:25 Vedr. Mozilla Thunderbird email program Af Arne-Beck Christensen i E-mail programmer
I dag 16:18 "Jesus Chirst Superstar" - Original version på dansk. Af Ikke-ekspert i Fri debat
I dag 12:55 Fjern løsesymbol fra tænd/sluk Af arnel i Skærme
I dag 12:06 Gmail hvor mails ikke synkronisere Af made18 i E-mail programmer
White papers
Flere white papers »


Premium
Teaser billede
Kritisk CVE-databasen om sikkerhed reddet i allersidste øjeblik - ny bevilling godkendt
Læs mere »
Netcompany-stifterne André Rogaczewski og Claus Bo Jørgensen skovler penge ind: Har tjent næsten 600 millioner kroner på et år
Sådan modererer Mads og 20 andre danskere alt indhold på Metas danske platforme fra et center i Barcelona
Jeg købte tømmermands-pizza for alle mine bitcoins og gik glip af en formue: Nu overvejer jeg at gå all-in igen
Se alle »
Computerworld
Teaser billede
Test af monster-tablet: Det er den skøreste og mærkeligste computer, som jeg har testet i lang tid – men jeg vil nu gerne have den alligevel
Læs mere »
Prøvekørt: Der er mange gode grunde til at kalde BMW i5 for den bedste el-stationcar til dato
Tech-milliardærer har øje på Grønland: Vil skabe en "frihedsby"
USA annullerer it-kontrakter for 35 milliarder kroner med omgående virkning: Accenture og Deloitte rammes hårdt
Se alle »
CIO
Teaser billede
Kræver nye systemer: Folk siger op, hvis virksomheden ikke skifter til S/4 Hana
Læs mere »
Google udnytter Microsoft-brugernes modvilje mod at skifte fra Windows 10 til 11: Klar med ny løsning
Danske virksomheder søger væk fra amerikanske tech-giganter: Mange vil skifte til tysk Microsoft-alternativ
Microsoft ændrer i regler og betingelser for partnere: Gavner særlig type partnere
Se alle »
Job & Karriere
Teaser billede
Den danske it-branche er på vagt: Hvad nu hvis Trump lukker for Microsoft 365 og AWS fra på mandag?
Læs mere »
Carsten advarede som it-sikkerhedschef om problemer og blev fyret: "Det endte med voksen-mobning af værste skuffe"
Microsoft fyrer de dårligst performende ansatte: Disse jobtitler bliver ramt
Danske it-folk lokkes med store tiltrædelses-bonusser: Nu kan du score mere end 100.000 kroner ved at skrive under på ny jobkontrakt
Se alle »
White paper
Teaser billede
Revolutionér kundeoplevelsen med AI og automatisering
Læs mere »
AI og kunderejsen: Sådan vinder du fremtidens forbrugere
Sådan sikrer du nem og beskyttet adgang til dine ressourcer
Tidsbegrænset kampagne: Overvejer du at udskifte eller tilføje printere i din forretning? Vi kan tilbyde én eller flere maskiner gratis
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »