[Dhtml] relatieve positie div aanpassen

[alientje]

Wat heb ik gemaakt?
Een verticaal en horizontaal gecentreerde tabel met vaste groote met een zootje zellen erin.

Wat moet er gebeuren?
In een van die cellen staat een link die 'onMouseOver' een div-je weergeeft dat relatief aan de positie van die cel met de link, een bepaalde positie moet krijgen. De div staat nu rechts van link maar ik wil dat hij onder de link gaat staan.

Wat heb ik geprobeerd?
Ik pak de beginwaarde van de div:

code:

function change(naam) { 
   var xpos, ypos
   document.getElementById(naam).style.visibility = 'visible';      
   xpos = document.getElementById(naam).style.posLeft
   ypos = document.getElementById(naam).style.posTop
}

Ik wilde de div wat naar links verplaatsen dus afhankelijk van 'xpos'.
Hier gaat het fout... ondanks dat de div vrijwel midden op de pagina staat blijven 'xpos' en 'ypos' de waarde 0 ontvangen. Hierdoor kan ik dus de div niet afhankelijk van de oude positie verplaatsen. 'pixelLeft' in plaats van 'posLeft' heb ik ook geprobeerd, maar 'xpos' blijft 0.
Ik had ook geprobeerd om de positie van de link op te vragen maar ik kreeg toen tevens 0.
Zijn er nog andere manieren om de div op de goede positie te krijgen?

[André]

function Show()
{
document.getElementById("Bla").style.Left = event.x + "px";
document.getElementById("Bla").style.Top = event.y + "px";
}

<div id="Bla" style="position:absolute;left:0px;top:0px;">Bla</div>
<a onmouseover="Show()">Test</a>

Hier kom je al wat verder mee.

[ Voor 45% gewijzigd door André op 22-10-2003 15:22 ]

[crisp]

Je zit nodeloos moeilijk te doen. Ten eerste kan je de huidige positie van een element nooit aan de hand van de style properties achterhalen, dat kan wel via de offsetLeft en offsetTop properties van het element zelf, maar dat is dan nog altijd ten opzichte van z'n container.
Verder geven style properties die niet inline al meegegeven zijn nooit een waarde terug, en posLeft en posTop bestaan al helemaal niet.
Wat je beter kan doen is zorgen dat je div al meteen op de goede plaats staat door een container te gebruiken, en de div al t.o.v. die container goed te positioneren:

HTML:

<td><div style="position:relative">
  <a href="javascript://" onclick="document.getElementById('bla').style.visibility='visible'">klik</a>
  <div id="bla" style="position:absolute;left:10px;top:20px;visibility:hidden">divje</div>
</div></td>

foei André: IE-only...

[André]

crisp schreef op 22 October 2003 @ 15:24:
foei André: IE-only...

Het is ook maar een simpel voorbeeldje van een mogelijke oplossing

[alientje]

@andre: dat had ik idd kunnen doen, maar dan verschoof het menuutje de hele tijd en daar had ik geen zin in.

@crisp: ik dacht eerst dat het niet zou lukken, omdat IE elke div op een aparte regel zet en het menu waarin de link staat horizontaal is. Maar ik kan natuurlijk gewoon elke link in een celletje zetten

Verder wilde ik de link niet een een div zetten omdat ik een scriptje gebruik dat alle divs uitschakelt op de pagina en nu moet ik weer uitzonderingen gaan maken, maar goed
Verder wil ik niet zeuren, maar zo te zien bestaan 'posLeft' toch echt:
http://msdn.microsoft.com...ude/html/dude06052000.asp
of ik begrijp de code gewoon niet

Het werkt nu iig, thnx
Doe er maar een slotje op

[crisp]

alientje schreef op 22 October 2003 @ 15:52:
[...]
Verder wil ik niet zeuren, maar zo te zien bestaan 'posLeft' toch echt:
http://msdn.microsoft.com...ude/html/dude06052000.asp
of ik begrijp de code gewoon niet

IE-propriety dan waarschijnlijk, daar laat ik me niet mee in (ik zie ook document.all in die code staan - *gruwel* )

Het werkt nu iig, thnx
Doe er maar een slotje op

slotje hoeft niet hoor