[js][menu] positie submenu in NS & Mac

[Verwijderd]

Ten eerste de volgende informatie:
Voor een website die ik aan het maken ben probeer ik een OpenSource dropdown menu in Javascript om te bouwen naar mijn eigen smaak.
Na zoeken op internet (Google, javascript websites, hotscripts.com, etc) ben ik op de volgende website gekomen waar een dropdown menu wordt aangeboden wat ik nog kan volgen, en wat redelijk logisch en simpel in elkaar zit.
|||||||het originele script|||||||
Op internet zijn veel dropdown-menu's te vinden, maar deze zijn meestal voor mijn eisen te ingewikkeld of te simpel.

Wat heb ik nu?
Ik heb een aantal dingen die ik niet nodig heb uit de code gesloopt. Deze functie hadden geen invloed op mijn probleem en zijn niet relevan om terug te halen. Het originele script werkt ook niet goed genoeg.
Zoals het er nu uitziet is te zien op:
|||||||zo ziet het er nu uit|||||||

Waarom reageer ik hier, en niet op hun forum?
Omdat (zoals vaak) de website snel af moet zijn heb ik hier meer kans op reageren dan daar. Verder denk ik ook dat mensen die hier op reageren meer tot de kern van het probleem kunnen komen dan de gebruikers die ik daar tegen kome.

Ik stel aan mijn uiteindelijk menu de volgende eisen:

• werkend op:
• IE6 in Windows (werkt nu al)
• IE5 in Windows (werkt nu al)
• NS6+ in Windows (werkt niet)
• IE5+ op de Mac (werkt niet)
• Safari op de Mac (werkt niet)
• eventueel andere browsers

Waar ik nu tegen aan loop
Op de belangrijkste browsers, waar het wel op zou moeten werken kom ik de volgende problemen tegen:

• redelijk werkend:
• Met Safari(macOSX) en Netscape 6(Windows) verschijn het submenu niet onder het menu-item, maar linksboven aan het menu. Er gaat hier iets fout met de postitie van de layer die aangemaakt wordt.
• niet werkend
• Met IE5+(macOSX) wordt geen enkel submenu weergegeven.

Delen van het script waar het om gaat:
^{even voor de syntaxhighlighting in php}

In het html bestand wordt het menu en submenu zo aangeroepen:(id, subid, link, titel)

PHP:

  AddMenuItem (1, 0, "voorbeeld_GoT.htm", "algemeen")
    AddMenuItem (11, 1, "voorbeeld_GoT.htm", "waarom")
    AddMenuItem (12, 1, "voorbeeld_GoT.htm", "werkt")
    AddMenuItem (13, 1, "voorbeeld_GoT.htm", "het")

Deze functie maakt voor elke sub-item een layer aan:

PHP:

function DrawMenu ()  {

    for (var i=0; i<numLevel ; i++)
    {
        lw_createLayer("menu_level_"+i, 1, 1, 0, 0, 100)
    }

Opvallend in bovenstaand script is dat de tweede en derde eigenschap (hier 1 en 1) bij de waarden 0, 0 ervoor zorgen dat het submenu helemaal linksboven in het venster verschijn en bij de waarde 1, 1 linksboven in het menu...


lw_createLayer maakt een layer met eigenschappen: _{(ivm layout hier op meerdere regels)}

PHP:

function lw_createLayer (layerName, top_pos, left_pos, width, height, z_index)
{
    document.write("
        <div ONCLICK='event.cancelBubble=true' 
        id='"+layerName+"' style='z-index:" + z_index + ";
        position:absolute;top:"+top_pos+";left:"+left_pos+";
        visibility:hidden;'>
        <table bgcolor='#00395E' cellpadding=0 cellspacing=0>
        <tr>
        <td valign=top width='"+width+"' height='"+height+"'>
        <span id='"+layerName+"_content'></span>
        </td>
        </tr>
        </table>
        </div>
    ")
}

Deze functie berekent de positie:

PHP:

var lw_leftpos = 0
var lw_toppos = 0
var lw_width = 0
var lw_height = 0

function lw_calcpos(obj) {
    lw_leftpos=0
    lw_toppos=0
    lw_width = obj.offsetWidth
    lw_height = obj.offsetHeight

    var aTag = obj
    do {
        lw_leftpos += aTag.offsetLeft;
        lw_toppos += aTag.offsetTop;
        aTag = aTag.offsetParent;
    } while(aTag.tagName!="BODY");
}

Via de functie DrawMenu () wordt de functie displayMenuItem(menuId) aangeroepen die vervolgens de volgende functie aanroept:

PHP:

function showActualSubmenu(menuId,trigger) {
    var nLevel = 0
    var leftpos = 0 
    var nIndex=0

    if (menuId>0)
    {
        lw_calcpos(trigger)

        for (var i=0;i<menuCounter;i++)
        {
            if (menu[i].id==menuId)
            {   
                nLevel = menu[i].levelId
                nIndex = i
            }
        }

        if ((orientation==1)||(menu[nIndex].parentId>0))
        {
            lw_getObj("menu_level_"+nLevel).top=lw_toppos
            leftpos = lw_leftpos + lw_width + 5

            if (nLevel==0) {
                leftpos -= 3
            }
        }
        else {
            lw_getObj("menu_level_"+nLevel).top = lw_toppos + lw_height + 2
            leftpos = lw_leftpos
        }

        lw_getObj("menu_level_"+nLevel).left=leftpos

        sHTML = "<table cellpadding=0 cellspacing=1 border=0>"
        for (var i=0;i<menuCounter;i++)
        {
            if (menu[i].parentId==menuId)
            {
                sHTML += displayMenuItem (i)
            }
        }
        sHTML += "</table>"

        document.getElementById("menu_level_"+nLevel+"_content").innerHTML=sHTML
        lw_showLayer('menu_level_'+nLevel)
    } 
}

En wat is nu mijn vraag aan jullie?
Aangezien mijn javascript kennis vrij matig is, en dus niet verder kom dan:
"Het heeft iets te maken met offsetLeft en offsetTop denk ik", wil ik jullie vriendelijk vragen of je ervaring hebt met positioneren van layers in javascript en kunt ontdekken waar ik moet zoeken, en wat hier nu precies het probleem is.
Een paar stappen in de goede richting zou al erg veel hulp zijn.

Hoe heb ik mij voorbereid?
Ik heb uitgebreid op Google gezocht, maar niet dat gevonden dat voor mijn niveau en het niveau van het menu een hulp is.
Ik heb hier op GoT in de devschuur gezocht naar mensen met een zelfde probleem, maar heb deze niet gevonden (Er waren wel soortelijke problemen, maar toch net niet iets waar ik wat aan heb.

Ik heb geprobeerd in mijn post zo duidelijk mogelijk te zijn, maar hoop dat jullie het mij niet kwalijk nemen als er dingen nog niet duidelijk zijn.
Bij vragen van jullie kant zal ik die in dit bericht als "update" erbij voegen.

Alvast hartelijk dank!

[Verwijderd]

Allereerst moet ik je even complimenteren met de prima topicstart. Je kennis is misschien matig, maar je inzet is in ieder geval genoeg om daar iets aan te doen.

Het eerste wat mij opviel in je script is het volgende stukje:

code:

...position:absolute;top:"+top_pos+";left:"+left_pos+";visibility:hidden;...

IE is redelijk vergevingsgezind, maar bij afmetingen hoor je altijd een eenheid te geven. En dat is in het geval van browsers meestal pixels.

code:

...position:absolute;top:"+top_pos+"px;left:"+left_pos+"px;visibility:hidden;...

Ik kijk nog even verder, misschien is er wel meer aan de hand.

[Verwijderd]

Hier nog even een visuele versie van wat er fout gaat:

[crisp]

het geheel zit in een table zie ik; je moet dan of je table-cell een position:relative geven, of in je table-cell een extra container zetten met position:relative

[Verwijderd]

Als ik position:absolute verander in position:relative dan laat het submenu het originele menu verspringen en veranderd dat niets aan de fout.
Of bedoel je dat ik een style met nesten in de huidige style?
Veranderd dat dan iets aan de postitie? Ik zou denken van niet, maar ik ga wel ff mee stunten!

[crisp]

even ter illustratie; dit gaat goed in IE maar niet in Moz/FF:

cel1

Hier gaat het in alle browsers goed:

cel1

mzzz, IE6 doet het op de 1e manier ook niet meer goed; zal wel IE5.5 geweest zijn dan
nevermind dus

[ Voor 30% gewijzigd door crisp op 29-02-2004 21:01 ]

[Verwijderd]

mmm, dat is ook geen verbetering helaas. Wat er dan gebeurd is weer dat verspringen van het menu, en het submenu verschijnt in IE meer naar rechts.

Ik heb het gevoel dat het meer te maken heeft met de offsetLeft en de offsetTop en offsetParent ondersteuning. Ik weet dat echter niet zeker en heb op internet nog niets kunnen vinden wat me daar uitsluitsel over kan geven. Ik tob nog even verder en hoop stilletjes op de gouden tip!

[crisp]

Verwijderd schreef op 29 februari 2004 @ 21:03:
mmm, dat is ook geen verbetering helaas. Wat er dan gebeurd is weer dat verspringen van het menu, en het submenu verschijnt in IE meer naar rechts.

Ik heb het gevoel dat het meer te maken heeft met de offsetLeft en de offsetTop en offsetParent ondersteuning. Ik weet dat echter niet zeker en heb op internet nog niets kunnen vinden wat me daar uitsluitsel over kan geven. Ik tob nog even verder en hoop stilletjes op de gouden tip!

mwa, ik ben dus niet zo voor het bepalen van posities dmv javascript als ik elementen al met CSS goed kan positioneren...