[js]menu doet raar

[paragon]

Ik ben dus met een menutje bezig wat te voorschijn moet komen als er een mouseover plaatsvind op een bepaald element en weer moet verdwijnen als er een mouseout plaatsvind. Alleen is het probleem nu dat als de ik over de text binnen het element ga dit ook als een mouseout gezien wordt. Moet ik dan iets zoals el.child toevoegen?

JavaScript:

if (el.id == "menu") {
    el.onmouseover = function() {
        if (this.className == "link") {
            if (document.all) {
                this.filters.alpha.opacity=100;
                this.style.cursor = "hand";
            }
            else this.style.MozOpacity = 1;
            makeVis('navsub');
        }
    }
    el.onmouseout = function() { 
        if (this.className == "link") {
            if (document.all) {
                this.filters.alpha.opacity=70;
            }
            else this.style.MozOpacity = 0.7;
            timer = setTimeout("makeHid('navsub')",500);
        }
    }
}

En voorbeeld staat hier het menutje moet verschijnen als er over het gedeelte "league" wordt gegaan: http://paragonxls.xs4all.nl/fscrl/?page=down&lang=eng
alleen nog getest in IE maar kan zijn dat de functionaliteit in mozilla nu het zelfde is.

[ Voor 15% gewijzigd door crisp op 25-10-2003 17:59 . Reden: code fix ]

[Spider.007]

een bekend probleem. Maak een event; trigger de verdwijn onmousout pas na 10 ms en clear deze verdwijn event onmouseover. Probleem opgelost

[paragon]

Aan zoiets had ik zelf dus ook al gedacht maar dat is niet de meest elegante oplossing. Wat ik raar vind is dat er in het menu dat dus verschijnt wel over de tekst gehoovered kan worden zonder dat de onmouseoutfunctie getriggerd wordt.

[crisp]

dat heeft te maken met eventBubbling; een mouseout op een hoger gelegen element bubbled door naar ondergelegen elementen. In dit geval ga je in je menu over een li-element, dat triggered een mouseout op de li, die doorbubbled naar je ondergelegen element en daar ook de onmouseout triggered. Wat je kan doen is checken of het target element (of srcElement in IE) van je event wel je menu zelf is, of je list-item in dat menu

lastig om zo 1-2-3 uit te leggen; de oplossing van Spider.007 is ook bruikbaar, maar het kan wel op een mooiere manier. Ik ben bezig met een artikel over event-handling waar dit ook zeker aan de orde komt, maar gezien mijn drukke bezigheden op dit moment kan dat nog wel even gaan duren voor die af is...

[ Voor 29% gewijzigd door crisp op 25-10-2003 22:13 ]

[Spider.007]

[google=javascript event bubbling]

quote: http://www.xs4all.nl/~ppk/js/events_order.html

In the Microsoft model you must set the event’s cancelBubble property to true.

code:

window.event.cancelBubble = true

In the W3C model you must call the event’s stopPropagation() method.

code:

e.stopPropagation()

[paragon]

Ik heb het maar even met de timer functie opgelost alleen ben ik in opera op een ander probleem gelopen. Binnen de code loop ik door alle menu elementent heen en wijs dan op elk element een bepaald actie toe alleen bij bijvoorbeeld een onmouseover op elk willekeurig menu element wordt de actie toegepast op het laatste menu element. terwijl de onlcick wel gewoon voor het juiste menu element wordt uitgevoerd.

JavaScript:

function addRollOver() {
    var liArr=document.getElementsByTagName("li");
    for (var i=0; i<liArr.length; i++) {
        var el = liArr[i];
        if (el.className == "linkact") {
            if (bt == 'ie6') el.style.filter = 'alpha(opacity=70)';
            if (bt == 'moz') el.style.MozOpacity = 0.7;
        }
        if (el.className == "link") {
            if (bt == 'ie6') el.style.filter = 'alpha(opacity=70)';
            if (bt == 'moz') el.style.MozOpacity = 0.7;
            if (bt == 'op7') el.style.backgroundColor = '#ccc';
            el.onmouseover = function() { 
                if (bt == 'ie6') {
                    this.filters.alpha.opacity=100;
                    this.style.cursor = "hand";
                }
                if (bt == 'moz') this.style.MozOpacity = 1;
                if (bt == 'op7') el.style.backgroundColor = '#faa';
            }
            el.onmouseout = function() { 
                if (bt == 'ie6') this.filters.alpha.opacity=70;
                if (bt == 'moz') this.style.MozOpacity = 0.7;
                if (bt == 'op7') el.style.backgroundColor = '#ccc';
            }
            el.onclick = function() { 
                open(this.childNodes[0], taget='_self');
                return false;
            }
        }
    }
}

[ Voor 10% gewijzigd door crisp op 27-10-2003 16:53 . Reden: code fix :) ]

[paragon]

Hmm ik wilde zelf de code fixen maar had gequote ipv geedit

En never mind het is opgelost.

el.style.backgroundColor moet this.style.backgroundColor zijn.

[ Voor 142% gewijzigd door paragon op 27-10-2003 17:06 ]