Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

javascript schoonmaken

Jos1966
2 antwoorden
  • Hallo,

    Ik heb een leuk menu gevonden dat in javascript geprogrammeerd is.
    Ik heb het al helemaal herschreven zodat het op mijn site met xhtml en css werkt, althans in IE, niet in Firefox. Er wordt in een <DIV> een attibuut menu="menu#" gebruikt dat niet werkelijk bestaat voor <DIV>, maar wel essentieel is voor de werking van script. Dat is de enige fout die ook de validator van W3 nog aangeeft. Zelf dacht ik het te kunnen oplossen met getElementbyId; zo loste ik eerder al dergelijke problemen op in forms bijvoorbeeld, maar hier ligt het anders denk ik.

    Hoe kan ik het script met de id als identificatie van de <DIV> laten werken ipv met de uit de hoed getoverde "menu="

    Hier de div sectie met het hoofdmenu:

    <DIV Id="menuBar" class="menuBar" >
    <DIV Id="Bar1" class="Bar" menu="menu1">Menu #1</DIV>
    <DIV Id="Bar2" class="Bar" menu="menu2">Menu #2</DIV>
    <DIV Id="Bar3" class="Bar" menu="menu3">Menu #3</DIV>
    <DIV Id="Bar4" class="Bar" menu="menu4">Menu #4</DIV>
    </DIV>

    En hier de tekst uit het .js bestand




    [code:1:61297c553e]

    function InitMenu()
    {
    var bar = menuBar.children

    for(var i=0;i < bar.length;i++)
    {
    var menu=eval(bar[i].menu)
    menu.style.visibility = "hidden"
    bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")
    var Items = menu.children
    for(var j=0; j<Items.length; j++)
    {
    var menuItem = eval(Items[j].id)

    if(menuItem.menu != null)
    {
    menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
    //var tmp = eval(menuItem.id+"_Arrow")
    // tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
    FindSubMenu(menuItem.menu)}

    if(menuItem.cmd != null)
    {
    menuItem.onclick = new Function("Do("+menuItem.id+")") }

    menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

    }

    }
    }
    function FindSubMenu(subMenu)
    {
    var menu=eval(subMenu)
    var Items = menu.children
    for(var j=0; j<Items.length; j++)
    {
    menu.style.visibility = "hidden"
    var menuItem = eval(Items[j].id)


    if(menuItem.menu!= null)
    {
    menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
    // var tmp = eval(menuItem.id+"_Arrow")
    //tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
    FindSubMenu(menuItem.menu)
    }

    if(menuItem.cmd != null)
    {
    menuItem.onclick = new Function("Do("+menuItem.id+")") }

    menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

    }
    }
    function ShowMenu(obj)
    {
    HideMenu(menuBar)
    var menu = eval(obj.menu)
    var bar = eval(obj.id)
    bar.className="barOver"
    menu.style.visibility = "visible"
    menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
    menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
    }

    function highlight(obj)
    [/code:1:61297c553e]

    Hier voor de volledigheid ook even de link waar ik het vandaan heb.
    http://javascript.internet.com/navigation/cascade-menu.html

    Alvast bedankt.

    Jos
  • Het probleem is niet zozeer het custom attribute "menu", maar meer de IE-only manier van scripten. Die niet alleen verouderd is, maar zelfs voor 2001 begrippen heel lelijk is.

    Alle elementen worden als object opgevraagd op de document.all wijze die Firefox niet ondersteunt. Daarnaast wordt er ook nog eens overal met eval's gesmeten en ook de window.navigate method is niet standaard.

    Mijn tip: zoek een meer recent script. Om dit om te bouwen ben je evenveel tijd kwijt als totaal opnieuw schrijven.

    Of, beter nog, zoek even op het suckerfish menu. Dat is een dropdown menu zonder gebruik van javascript (nou ja, bijna dan, voor IE6 en lager moet een klein truukje worden uitgehaald met JS).

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.