[JS en HTML] layers verdwijnen niet altijd bij onmouseout

[Theske]

Beste Tweakers,

Ik was hier gister al mee bezig geweest en ben nu alweer een wat verder gekomen alleen heeft het helaas nog niet tot het gewenste resultaat geleid.
Ik heb een dropdown menu gemaakt (aangepast van de versie op dynamicdrive.com) die verschillende kleuren bevatten, dus voor elk menu een andere kleur. Nu is dit mij gelukt door verschillende div's te laden in het script. Het werkt allemaal hartstikke leuk, de menu's klappen uit en de verschillende kleuren zijn te zien. Maar nadat ik met mijn muis over kop1 ben gegaan en daar de menu bij is uitgeklapt via het uitgeklapte menu (of kop) over kop2 ga, dan klapt ook daar het menu bij uit maar verdwijnt het menu onder kop1 niet.
Het menu verdwijnt echter wel als ik met mijn muis helemaal van de layer (uitgeklapte menu) en kop verdwijn.
Dus als ik met mijn muis over alle kopjes heenga, zijn er vijf mooie uitgeklapte menu's te zien (wat dus niet de bedoeling is). En wanneer ik dan met mijn muis buiten de layers verdwijn, dan gaat alleen het menu weg waar ik als laatste met mijn muis ben geweest.

Ik denk dat het komt doordat alle div's tegelijk worden geladen en dat hij daarmee in de knoop komt.... ik kan ze in ieder geval niet apart laden (voor zover ik het getest) want dan werkt alleen diegene die direct is geladen.

Ik heb al wat geprobeerd, door op verschillende plekken koppelingen naar functies te maken... zo ook in de link bij onMouseout en bij de functie dropdownmenu() heb ik geprobeerd de functie delayhidemenu() aan te roepen, maar dan verdwijnt het uitgeklapte menu direct weer (zoals naar verwachting) .

Na veel geblaat hoop ik dat het een beetje duidelijk is, nu ik alle scenario's heb verteld.....

Hieronder vermeld in de betreffende codes.... mochten jullie nog meer informatie en/of duidelijkheid willen, laat het maar weten.

Ik hoop dat jullie de oplossing weten waardoor mijn menu's ook direct verdwijnen wanneer een ander menu tevoorschijn komt.

De link naar de code is alsvolgt:::

HTML:

<td width="97" class="td_menu">
  <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '1', '160px')" onMouseout="delayhidemenu()">Het bureau</a>
</td>
<td width="116" class="td_menu">
  <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '2', '160px')" onMouseout="delayhidemenu()">Onze principes</a>
</td>
<!-- enzz.... -->

En de JS code::: (ik heb java aangegeven, dan is het misschien overzichtelijker door de kleurtjes)

Java:

if (ie4||ns6){ 
// het heeft geen zin om van de 1,2,3... een variabele te maken gezien hij ze allemaal moet laden (of je kan een loop gebruiken natuurlijk... ;-)
document.write('<div id="dropmenudiv1" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
document.write('<div id="dropmenudiv2" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
// enz..
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function dropdownmenu(obj, e, menucontents, menustyle, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()

if (menustyle == 1)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv1") : dropmenudiv1
if (menustyle == 2)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv2") : dropmenudiv2
// enz..

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
}

return clickreturnvalue()
}


function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

edit:: JS code ingekort

[ Voor 73% gewijzigd door Theske op 14-11-2005 10:23 ]

[André]

Probeer eens uit te vinden wat er precies mis gaat in de code door de code zover te strippen dat je alleen overhoudt wat echt relevant is. Wij gaan niet deze hele code doorspitten om je te helpen: omdat je zelf nog niet echt wat geprobeerd hebt en je de code geript hebt

[Theske]

Ik heb in mijn eerste post de code aangepast wat mij verder relevant lijkt. Ik had eerst de gehele code gepost, gezien ik anders misschien de reactie zou krijgen om toch maar de gehele code te posten, vandaar.
Verder heb ik zelf ook doorgespit wat er nou allemaal gebeurt, die zooi uitgeprint en aantekeningen bij gemaakt.
Ik snap verder bij de meeste dingen wel wat er gebeurt, maar mijn JS kennis is niet zo groot vandaar dat ik er nu waarschijnlijk niet meer uit kom.
Maar wat er dus precies mis gaat durf ik dus niet te zeggen (los van het feit dat hij gewoon niet die menu's inklapt wanneer een 2e menu uitgeklapt wordt), maar ik denk dat het komt doordat er gebruik gemaakt wordt van meerdere div's.

Ik hoop dat jullie er zo iets wijzer van worden...

[Theske]

bescheiden kickje..

[dip]

Strip zoals André al zegt eerst de irrelevante zaken..

om te beginnen :

Java:

if (menustyle == 1)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv1") : dropmenudiv1
if (menustyle == 2)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv2") : dropmenudiv2
if (menustyle == 3)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv3") : dropmenudiv3
if (menustyle == 4)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv4") : dropmenudiv4
if (menustyle == 5)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv5") : dropmenudiv5
if (menustyle == 6)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv6") : dropmenudiv6

[ Voor 20% gewijzigd door dip op 14-11-2005 09:51 ]

[Theske]

Oke, ik heb hem nog wat verder ingekrimpt.
De functies die er nu nog staan heb ik bewust laten staan, gezien jullie hier misschien toch nog wat aan hebben om mij verder te kunnen helpen.

[Theske]

Overigens is het belangrijk om te weten hoe je die layers toevoegt. Waarschijnlijk dynamisch (althans met JS geset), maar ik zie dat niet terugkomen in je voorbeeld. Waarom is dat belangrijk, dan kunnen we controleren waarom die onmouseout niet wordt getriggered

Bedoel je hiermee de

Java:

populatemenu(menucontents)
// in de functie dropdownmenu()
//en dan...
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

of misschien de

Java:

if (ie4||ns6){ 
document.write('<div id="dropmenudiv1" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
//enz..
} 

[Theske]

Niemand..??

[disjfa]

Mischien bij de maker van het script.

Of mischien moet je een keer op zoek naar een manier die niet bedacht is in 1970 Wat jij wilt kan waarschijnlijk al met 3 regels css ipv heel die bak javascript die jij hebt staan.

[gvanh]

Iets heel simpels wat mij nog wel eens geholpen heeft ... probeer eens "onmouseleave" in plaats van "onmouseout" ... die is volgens mij wat vriendelijker met begrijpen wat je bedoelt!

[Theske]

Of mischien moet je een keer op zoek naar een manier die niet bedacht is in 1970 Wat jij wilt kan waarschijnlijk al met 3 regels css ipv heel die bak javascript die jij hebt staan.

Tja, ik heb al veel opgezocht.. maar ben die manier eigenlijk nog niet tegen gekomen....

Iets heel simpels wat mij nog wel eens geholpen heeft ... probeer eens "onmouseleave" in plaats van "onmouseout" ... die is volgens mij wat vriendelijker met begrijpen wat je bedoelt!

werkt helaas ook niet

[Theske]

een bescheiden kickje

[BtM909]

het is trouwens onmouseout en geen onMouseout

Ik heb het lijstje al eerder gepost, probeer eens je lijst op de volgende manier op te maken:

[rml]BtM909 in "[ HTML/CSS] ID en extern stijlblad"[/rml]

Als je dan vervolgens ook nog eens de oplossing van Clay erbij betrekt, dan heb je en goede markup voor je menu en nog een nette (veel simpelere) oplossing: http://www.xs4all.nl/~peterned/csshover.html

[ Voor 4% gewijzigd door BtM909 op 21-11-2005 13:17 ]

[Verwijderd]

zoals disjfa al zegt, zou ik inderdaad ook gewoon met css werken (+ een klein beetje jscript).

Heb zelf de 'Son of Suckerfish' methode gebruikt. Met wat kleine aanpassingen (lees de comments), werkt dit in FF, IE (vanaf 5.0 + 5.2 op de mac), Opera, Safari (niet helemaal zeker over KHTML, niet getest) en Camino.

ben geen SoSF evangelist, maar vind m wel fijn werken :]

[Verwijderd]

Of zoek een ander menu, er zijn er maar 200.000 ofzo

[Theske]

Oke, bedankt maar weer
Dan ga ik daar maar weer mee aan de slag
Merciiii

edit::
maakt het dan nog wat uit of je onMouseout doet of onmouseout??? heeft dat gevolgen? of kan dat gevolgen geven?

edit2::
dreamweaver geeft het trouwens aan als onMouseOut...

[ Voor 59% gewijzigd door Theske op 21-11-2005 13:35 ]

[Verwijderd]

Dreamweaver heeft het fout, net zoals Dreamweaver zelf nogal wat fouten bevat

[Theske]

haha, okejz!
zoals elk programma zijn fouten heeft dus
maar wat zijn dan eigenlijk de gevolgen ervan? ik heb er namelijk nog niet echt problemen van ondervonden.