[DHTML] Menu gaat bij onmouseover weg - Softwareontwikkeling

donderdag 19 januari 2006 16:26

Acties:

tjop tjop

Topicstarter

ik heb deze code als html

code:

<table><tr>
<td class="menu_kopje" id="buro_0" onmouseover="kleur_me('aan','buro_0')" onmouseout="kleur_me('uit','buro_0')" onClick="show_menu('buro_menu')">
            buro
        </td></tr></table>
----andere pagina------
<div id="buro_menu" onmouseout="zet_uit('buro_menu')">
    <a href="content/buro_het_buro.html" target='content'><span class='menu_link'>het buro</span></a><br>
    <a href="content/buro_medewerkers.html" target='content'><span class='menu_link' >medewerkers</span></a><br>
    <a href="content/buro_visie.html" target='content'><span class='menu_link' >visie</span></a><br>
    <a href="content/buro_werkwijze.html" target='content'><span class='menu_link' >werkwijze</span></a><br>
</div>

daaraangekoppeld zit een javascript bestandje:

JavaScript:

function show_menu(welk){
    if(parent.content.document.getElementById(welk).style.display != 'block'){;
        parent.content.document.getElementById(welk).style.display = 'block';
    }else{
        parent.content.document.getElementById(welk).style.display = 'none';
    };

};
function kleur_me(ab,ac){}

het laten zien van het divje op de andere bladzijde gebeurd zonder problemen. De problemen ontstaan doordat ik het menuutje weg wil laten gaan als ik met mijn muis eraf ga...

een onmouseout in de div naar een uitzet functie werkt niet zoals gedacht... als ik over één van de link ga dan gaat ie dus ook al uit

.
Ik heb geprobeerd om er een tweede div bovenop te leggen met een transparante laag eroverheen... echter dat werkte bij mij ook niet...

hoe kan ik dit het beste oplossen?

hier zou een slimme opmerking kunnen staan
maar die staat er niet

donderdag 19 januari 2006 17:03

Acties:

Michali

Ik zou met een setTimeout en clearTimeout gaan werken. In je onmouseout doe je dan een setTimeout en in je onmouseover een clearTimeout. Zo kun je het laten verdwijnen iets vertragen en als je dan weer terug keert naar het menu blijft hij gewoon staan. Je moet die events dan zowel aan de div#buro_menu als de linkjes die er in zitten koppelen. Dat werkt bij mij altijd goed.

Noushka's Magnificent Dream | Unity

donderdag 19 januari 2006 17:06

Acties:

André

Analytics dude

Dat komt door het feit dat als je over de link gaat er een onmouseout optreed op je menu, daarna volgt een onmouseover op je link die weer doorbubbled naar je menu, alleen dat menu is dan al weggeklapt. Door de oplossing van Michali te implementeren kun je met een vertraging van 10ms dit al oplossen

maandag 23 januari 2006 16:28

Acties:

hobbeldebobbel

tjop tjop

Topicstarter

ok ik ben het spoor bijster.. hij doet het maar toch geeft hij een foutmelding.. volgens mij omdat door de fout in het script iets niet uitegevoerd wordt wat eigenlijk niet hoeft... maar toch... wil iemand er naar kijken? ik heb even een test document gemaakt met daarin hele vieze css+html combi's maar toch

HTML:

<html>
<head>
<script>
function show_menu(welk){
    if(document.getElementById(welk).style.display != 'block'){;
    document.getElementById(welk).style.display = 'block';
    }else{
        document.getElementById(welk).style.display = 'none';
    };
};

</script>
</head>
<body>
hier begint het<BR><BR>
<span style="cursor:pointer" onClick="show_menu('buro_menu')">klik hier omhet menu zichtbaar te maken</span>
<script>
function aftellen2(state,welkid,hoelang){
    if(state == 'aan'){
        timeoutID = setTimeout("hide_item2('"+welkid+"')", hoelang);
        };
    if(state == 'uit'){
        window.clearTimeout(timeoutID)
        };
};
    
function hide_item2(id){
    document.getElementById(id).style.display = 'none';
    };

</script>
<div id="buro_menu" onMouseOver="aftellen2('uit')" onMouseOut="aftellen2('aan','buro_menu','10')" style="position:absolute; top:0px;left:25px;background-color:red;border:1px solid black;display:none;">
    <a href='content/buro_het_buro.html' target='content' ><span class='menu_link' onMouseOver="aftellen2('uit','','')">het buro</span></a><br>
    <a href='content/buro_medewerkers.html' target='content' ><span class='menu_link' >medewerkers</span></a><br> 
    <a href='content/buro_visie.html' target='content' ><span class='menu_link' >visie</span></a><br>
    <a href='content/buro_werkwijze.html' target='content' ><span class='menu_link' >werkwijze</span></a><br>
</div>


</body>
</html>

hij geeft nu aan dat de timeoutID geen object is.... wat zie ik over het hoofd?

[ Voor 23% gewijzigd door hobbeldebobbel op 23-01-2006 16:29 ]

hier zou een slimme opmerking kunnen staan
maar die staat er niet

maandag 23 januari 2006 16:45

Acties:

Verwijderd

timeoutID globaal definieren???

maandag 23 januari 2006 16:45

Acties:

BtM909

Watch out Guys...

Je moet van timeoutID wel even een globale variabele maken

Simpelweg voor je functie

JavaScript:

1	var timeoutID;

Should do the trick.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 23 januari 2006 17:12

Acties:

hobbeldebobbel

tjop tjop

Topicstarter

kijk toch goed op weg........ alleen dat global maken

kool! hij werkt

hier zou een slimme opmerking kunnen staan
maar die staat er niet

maandag 23 januari 2006 17:12

Acties:

Michali

Als je geen var keyword voor de variabel zet in een functie (en mischien in een andere scope ook), dan wordt het automatisch een global. Dat kan het probleem dus niet zijn. Het probleem is dat je als eerste handeling een clearTimeout doet, terwijl timeoutID nog geen waarde heeft (undefined, en dat is geen window handler/identifier). Het expliciet global maken van timeoutID, brengt daar geen verandering in. Een oplossing is van regel 23 dit maken:

JavaScript:

1	if ( timeoutID != undefined && timeoutID != null ) window.clearTimeout(timeoutID);

Overigens is het wel een goed idee om die global expliciet te defineren. Dat communiceert beter naar de lezer van de code (waaronder ook jij zelf dus).

edit: Hmm, vreemd dat het toch daar aan lag. Mischien nu omdat timeoutID de waarde null krijgt, en omdat clearTimeout daar wel goed op werkt?

[ Voor 10% gewijzigd door Michali op 23-01-2006 17:13 ]

Noushka's Magnificent Dream | Unity