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 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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
01/0823:45 Råd om køb af gaming pc til ca. 7.0000 kr. Af kurtba i PC
01/0822:33 Thunderbird starter først lydfil ved manuel åbning. Af valby i E-mail programmer
01/0815:04 Bluetooth 5.2 Af Peter Olsen i Mobiltelefoner
01/0813:38 Valg af harddisk til Samsung TV Af OeNP i Fjernsyn & projektorer
31/0714:26 Nyligt bygget computer slukkede efter 20 minutters funktionalitet Af Xerify i PC
White papers
Flere white papers »


Premium
Teaser billede
ChatGPT slået af tronen: Ikke længere virksomhedernes foretrukne AI-værktøj
Læs mere »
Nvidias danske afdeling boomer: Over 100 ansatte og fordoblet overskud
Dropbox lukker sin passwordmanager: Brugere skal hente adgangskoder, inden de bliver slettet
I løbet af få timer torsdag blev Microsoft tusind milliarder kroner mere værd: Runder som blot andet selskab nogensinde markant milepæl
Se alle »
Computerworld
Teaser billede
Din iPad bliver nu (næsten) en Mac - men Apple insisterer på, at den stadig er en iPad
Læs mere »
Microsoft stopper support til Windows 11-version om få måneder
Amazon er verdens næststørste private arbejdsgiver: Overgåes kun af et selskab på jorden
Hacker-grupper rammer kendt flyselskab med koordineret angreb
Se alle »
CIO
Teaser billede
Jonas Frank Johannesen fratræder som it-direltør i Velux efter 'konstruktiv dialog' med sin chef
Læs mere »
Microsoft dropper support af M365-programmer, der er installeret gennem Microsoft Store: Se om din version bliver forældet
Europæiske cloud-udbydere kræver Broadcoms opkøb af VMware annulleret: Hiver EU-Kommissionen i retten
Microsoft-chef under ed: Ingen garanti for, at europæriske data ikke udleveres til USA
Se alle »
Job & Karriere
Teaser billede
Danske it-folk tør ikke længere skifte job hele tiden - og det er der en særlig årsag til
Læs mere »
Itm8 fyrer: Opsiger ansatte og reorganiserer
Lille dansk it-virksomhed fra Vanløse lander drømmekontrakt, der rækker langt ind i stifterens pension
Larry Ellison er blevet 165 milliarder kroner rigere på få timer: Er nu pludselig verdens næstrigeste mand
Se alle »
White paper
Teaser billede
IT i front: Sådan bliver netværk en strategisk driver
Læs mere »
Revolutionér kundeoplevelsen med AI og automatisering
Sådan får du reel værdi ud af Microsoft Copilot
Sådan får du succes med AI i hele organisationen
Se alle »

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