[Javascript] Positie van uitklapmenu bepalen - Softwareontwikkeling

donderdag 17 maart 2005 15:05

Acties:

Topicstarter

Ik ben bezig met een uitklapmenu te maken, die ik met een eigen javascriptje toon (display = block) als er op een hoofdmenu item geklikt wordt.

Code die ik gebruik:

code:

<html>
<head>
<script>
function showDiv(e,menunaam)
{
    var posx = 0;
    var posy = 0;

    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        left = e.pageX;
        bottom = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        left = e.clientX + document.body.scrollLeft;
        bottom = e.clientY + document.body.scrollTop;
    }

    left = left - 15;
    bottom = bottom + 19 ;
    element = document.getElementById("menu" + menunaam);
    element.style.left = left + "px";
    element.style.top = bottom + "px";
    element.style.display = 'block';
}
</script>
</head>

<body>

<div id="een"><a href="#" class="hoofdmenu" onclick="showDiv(event,'Over ons');">Hoofdmenu item 1</a></div>
<div id="twee"><a href="#" class="hoofdmenu" onclick="showDiv(event,'Over ons');">Hoofdmenu item 2</a></div>
<div id="drie"><a href="#" class="hoofdmenu" onclick="showDiv(event,'Over ons');">Hoofdmenu item 3</a></div>
<div id="vier"><a href="#" class="hoofdmenu" onclick="showDiv(event,'Over ons');">Hoofdmenu item 4</a></div>

<div id="menuOver ons" style="z-index: 20; position: absolute; left:0; top:0; padding: 7px 15px; display: none; background: #fff;">
    Subitem 1<br>
    Subitem 2<br>
    Subitem 3<br>
</div>

</body>
</html>

Als ik nu op een hoofdmenu item klik wordt het divje netjes getoond. Maar klik ik op hetzelfde hoofdmenu item, maar dan een aantal milimeters opzij, wordt ook het submenu een aantal milimeters verschoven! Dit komt omdat ik alleen de coordinaten binnenhaal van de positie van de cursor als er geklikt wordt, en niet de coordinaten van het hoofdmenu item.

Ik wil dus graag, als er op een hoofdmenu item geklikt wordt, de coordinaten (top en left) binnenhalen van het hoofdmenu item (in dit geval een div met een id) waarop ik klik. In dit geval wordt het uitklapmenu wel netjes geplaatst waar ik wil, en komt hij altijd op dezelfde plek, ongeacht op welke plek in een hoofdmenu item ik ook klik. Wie weet hoe ik dit het beste kan doen??

donderdag 17 maart 2005 15:07

Acties:

André

Analytics dude

Kun je dan niet gewoon je submenu's relatief plaatsen ten opzichte van je hoofdmenu-items?

donderdag 17 maart 2005 15:28

Acties:

Foutlook

Topicstarter

Heb het inmiddels gevonden (toch wel met absolute positioning)
Dit haalt de juiste top en left values binnen:

JavaScript:

function showDiv(hoi,menunaam)
{
    obj = document.getElementById(hoi);

    var curleft = 0;
    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curleft += obj.offsetLeft
            obj = obj.offsetParent;
        }
    }
    else if (obj.x)
        curleft += obj.x;

    var curtop = 0;
    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curtop += obj.offsetTop
            obj = obj.offsetParent;
        }
    }
    else if (obj.y)
        curtop += obj.y;


    curleft = curleft + 10;
    curtop = curtop + 19 ;
    element = document.getElementById("menu" + menunaam);
    element.style.left = curleft + "px";
    element.style.top = curtop + "px";
    element.style.display = 'block';
}

donderdag 17 maart 2005 15:38

Acties:

André

Analytics dude

Foutlook schreef op donderdag 17 maart 2005 @ 15:28:
Heb het inmiddels gevonden (toch wel met absolute positioning)

Met absolute positioning kun je ook relatief positioneren, dan ben je die overbodige code niet nodig:

code:

<style>
  div {
    position: absolute;
    left: 20px;
    top: 5px;
    border: 1px solid #000000;
    width: 10px;
    height: 10px;
  }
</style>

<div>
  <div>
    <div></div>
  </div>
</div>

donderdag 17 maart 2005 15:42

Acties:

Foutlook

Topicstarter

André schreef op donderdag 17 maart 2005 @ 15:38:
[...]
Met absolute positioning kun je ook relatief positioneren, dan ben je die overbodige code niet nodig:

Idd, maar de submenu divjes spuug ik er ergens anders uit, dus die kan ik niet binnen de div zetten waar de hoofdmenu items zich bevinden. (zie ook code in mijn eerste post).

donderdag 17 maart 2005 15:57

Acties:

crisp

Devver

Pixelated

Overigens: ik zie dat je spaties gebruikt in je ID's; dat mag dus niet

Intentionally left blank

donderdag 17 maart 2005 15:57

Acties:

André

Analytics dude

Foutlook schreef op donderdag 17 maart 2005 @ 15:42:
[...]

Idd, maar de submenu divjes spuug ik er ergens anders uit, dus die kan ik niet binnen de div zetten waar de hoofdmenu items zich bevinden. (zie ook code in mijn eerste post).

Tuurlijk kan dat wel: gewoon javascript uitspugen die de divjes toevoegt als childs aan de hoofdmenu divjes.