Toon posts:

Suckerfish menu icm IE-behaviour probleem

Pagina: 1
Acties:
  • 100 views sinds 30-01-2008
  • Reageer

Verwijderd

Topicstarter
Ongeveer een maand terug ben ik bezig geweest met de ontwikkeling van een suckerfish dropdown menu. Het hele menu heb ik uiteindelijk werkend gekregen, zowel in IE en Firefox (Opera geeft nog een paar kleine foutjes). Door middel van csshover.htc werd het hover element ook in IE als :hover gelezen, zodat alles prima verliep.

Destijds heb ik daar ook een topic over aangemaakt, omdat ik aanvankelijk problemen had met de manier van maken. Nu dus toch met lists gedaan. Dit bestaande topic staat hier: [rml][ html/css] border-collapse issue[/rml]

Nu heb ik al een kleine doorstart gemaakt met de site waar ik dit menu op wil gebruiken, alleen loop ik tegen een heel vreemd probleem aan. De pagina is opgebouwd uit verschillende layers, relatief gepositioneerd. Nu wil het zo zijn dat de :hover van het menu ophoudt met haar werking als de cursor op een figuur uit onderstaande layer staat. (dit kan zowel een image als plaintext zijn)

Het komt er dus op neer dat het :hover element niet helemaal zijn werking doet. Op deze pagina staat het voorbeeld van mijn probleem. Het rode vlak is een image... Op het moment dat mijn mouseover van het menu er overheen gaat, en je probeert een link te hoveren welke toevallig over het rode vlak heenlicht, dan stopt IE met de hele hoverfunctie, en wordt de setTimeout in werking gebracht....

Ik heb geprobeerd dit op te lossen door te spelen met de z-indexen, maar dit heeft niet gewerkt. Aan gezien het een probleem betreft, enkel in IE, denk ik dat het aan de behaviour ligt. Iemand hier enige ervaring/herkenning mee?

Verwijderd

Topicstarter
Vanochtend weer even mee bezig geweest. Het ligt niet aan de csshover.htc, want als ik deze weghaal dan vertoont het script hetzelfde probleem... Dus ik vrees dat het nu aan de geinclude hover.js moet liggen...

Waarom post ik dit? natuurlijk als bescheiden kick, maar ook in de zoektocht naar een oplossing waar anderen misschien ook wat aan hebben. Als er dan weer een update is, dan kunnen ook anderen dit te weten komen...

met betrekking tot dit stukje javascript:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function shownav() {

    hidenavs(this.parentNode, this);

    var el = this.firstChild;
    while (el != null && (el.nodeType != 1 || el.tagName != 'UL')) el = el.nextSibling;

    if (el != null) el.style.display = 'block';

}

function hidenavs(level, skipli) {

    var stack = [level], i = 1, li, j, el;
    while (i--) {
        li = stack[i].childNodes, j = li.length;
        while (j--) {
            el = li.item(j);
            if (el != null && el != skipli && (el.tagName == 'UL' || el.tagName == 'LI')) {
                stack[i++] = el;
                if (el.tagName == 'UL') el.style.display = 'none';
            }
        }
    }

}


Het menu dat ALA heeft toegepast, gebruikt een andere js-code, welke in eerste instantie makkelijker lijkt. Deze code lijkt wel te werken, maar krijg ik niet lekker toegepast in mijn menu, aangezien de structuur toch een beetje afwijkt... Zij gebruiken de volgende code:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;


Met bijbehorende css:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
li>ul {
    top: auto;
    left: auto;
}

li li {
    display: block;
    float: none;
    background-color: transparent;
    border: 0;
}

li:hover ul, li.over ul {
    display: block;
}


aangezien dit hele stuk niet in mijn code voorkomt, ben ik nu ten einde raad (wederom)

[ Voor 80% gewijzigd door Verwijderd op 22-11-2004 13:00 ]


  • gitaarwerk
  • Registratie: Augustus 2001
  • Niet online

gitaarwerk

Plays piano,…

offtopic:
site vd topicstarte: raceplanet.net ? die was toch van ene eelco uit dordrecht? (die had ik vroeger op icq)

Ontwikkelaar van NPM library Gleamy


Verwijderd

Topicstarter
Gitaarwerk schreef op dinsdag 23 november 2004 @ 10:04:
offtopic:
site vd topicstarte: raceplanet.net ? die was toch van ene eelco uit dordrecht? (die had ik vroeger op icq)
Ja, dat klopt...
Maargoed, daarmee is mijn probleem nog niet opgelost natuurlijk ;)

[ Voor 12% gewijzigd door Verwijderd op 23-11-2004 10:15 ]


Verwijderd

Topicstarter
Mensen, de oplossing gevonden...

Na het debuggen, en het opnieuw maken van het menu, blijkt dus dat het helemaal misgaat wanneer ik de background weghaal in #nav li ul... Staat hier wel een background in (in mijn geval nu een transparante gif) dan trekt de cursor zich niets van onderliggende elementen aan, aangezien de background nog de :hover herkent bij wijze van spreken.

In de artikelen op ALA en op HtmlDog is me dit niet helemaal duidelijk geworden...maar ik ben er uit... Toch dank voor iedereen die een poging heeft gedaan dit te lezen..