Kd-one: Probleme mit DHTML-Menü

Beitrag lesen

Hallo Kurt

Ich hab mir mühevoll ein DHTML menü geschrieben, funktioniert auch soweit ganz gut, solange ich nur eine Ebene öffne.
Sobald ich aber versuche, aus der ersten Ebene eine zweite zu öffnen, spielt da Script verrückt.

für einen Anfaeger sieht das gar nicht übel aus. Dein Problem ist ein riesiges Timerproblem. Du überschreibst dir dauernd deine Timer.

Danke dir für das Kompliment und auch für deine wirklich genaue Ausführung. Dadurch habe ich die Problematik begriffen. ;-)

hier löschst du den Timer von Menue 1 und setzt ihn auf Menue 4. Soweit alles in Ordnung. Wissen muß man allerdings, dass ein mouse-Event auch feuert, wenn ein anderes Element betroffen ist. z.B. ein TD. Die bezeichnet man als Bubbling. Siehe auch http://selfhtml.teamone.de/dhtml/modelle/microsoft.htm#event_bubbling

Ja, soweit auch klar, diese Problematik hat sich ja ursprünglich ganz deutlich in Mozilla gezeigt, der als einziger bei jeder Mausbewegung das Menü flackern ließ. Deshalb bin ich ja auf die Lösung mit dem Timer verfallen.

Dein Mouseover und Mouseout-Event im Div-Tag werden also auch dann wirkungsvoll, wenn eine Tabellenzelle oder Zeile verlassen wird. Du merkst nur nichts davon.

In dieser Zeile

<tr>
       <td class="form6" id="w64" onmouseover="change(this.id,'mOver')" onmouseout="change(this.id,'mOut')"><a class="sub" href="#" onMouseOver="window.clearTimeout(timer);show_it('divMenu6');" onMouseOut="timer=window.setTimeout('hide_it('divMenu6')',100);" style="cursor:default;">

Du löschst den Timer auf Menue 4 und setzt ihn auf Menue 6. Danach wirken die mouseevent vom div und dein Timer von Menue 6 wird gelöscht und auf Menue 4 gesetzt. Möchtest du jedoch das Untermenue 6 erreichen, so muß auch dieser Timer gelöscht werden. Hier erfolgt zum ersten Mal ein unerwünschtes Überschreiben der Timer.

Nun, ich habe versucht, das Problem so zu umgehen, daß ich einen zweiten Timer(timer2) für die zweite Ebene definiert habe. allerdings wird, je nach Position immer nur einer der beiden angesprochen. Habe ich vielleicht bei der Timerdefinition einen Fehler gemacht?
So sieht´s im Moment aus:
im Script:

timer=false
timer2=false
function show_it(id)
{...restliche Definition

Der Aufruf in Menu4:

<td class="form6" id="w64" onmouseover="change(this.id,'mOver')" onmouseout="change(this.id,'mOut')"><a class="sub" href="#" onMouseOver="window.clearTimeout(timer2);show_it('divMenu6');" onMouseOut="timer2=window.setTimeout('hide_it('divMenu6')',100);" style="cursor:default;">POPUP´S</a></td>

Und nun die Definition im divMenu6:

<div id="divMenu6" style="visibility:hidden;"
onMouseOver="window.clearTimeout(timer,timer2);show_it('divMenu6');show_it('divMenu4');change('w64','mOverO');"
onMouseOut="change('w64','mOutO');timer=window.setTimeout('hide_it('divMenu4')',200);timer2=window.setTimeout('hide_it('divMenu6')',100);"><?php include("includes/javascript/popup/menue.txt") ?></div>

Wenn ich den Timeout wie oben beschrieben lösche, wird, wenn zuerst der timer angeführt ist, Menü6 ausgeblendet, wenn timer2 zuerst angeführt wird, wird Menü4 ausgeblendet und Menü6 bleibt stehen.
In diesem Falle kommt es auch zum oben beschriebenen Feuern, das heißt, beim Verlassen einer Zelle wird immer wieder kurzfristig Menü4 eingeblendet und verschwindet aber wieder. Um das zu verhindern, habe ich eigentlich die Timermethode angewandt????
Irgendwie werde ich den Verdacht nicht los, daß ich bei der Definition der beiden Timer einen entscheidenden Fehler gemacht habe.

Alternativ, so habe ich es neulich gelöst, überwachst du die Position des Mauszeigers und blendest in Abhängigkeit davon aus. :-)
Gegenüber der Timerproblematik ist das ein Kinderspiel.

Ja, möglich, aber mit dieser Problematik habe ich mich eigentlich überhaupt noch nicht auseinandergesetzt und wüßte auf Anhieb auch nicht, wie ich das realisieren könnte.

Eine weitere Möglichkeit sind verschachtelte Divbereiche, was für den NN4 zwar wieder Ärger bereitet, aber deine gegenwärtige Variante funktioniert da sowieso nicht.

Das verstehe ich nun nicht ganz. Menü 4 ist ein DIV-Bereich, indem aber letztendlich nur zwei Punkte der 7 möglichen einen neuen Layer aufrufen sollten. Wie könnte eine solche Verschachtelung aussehen?

siehe FAQ: </faq/#Q-19>

Danke für den Tip, das wußte ich noch nicht. ;-)

Also, hier nochmal: http://faq.united-web.at/layout_1.php

Ich ersuche um ausreichend dokumentierte Antworten, ich bin Anfänger in Sachen JavaScript, mit Verweisen auf allgemeine Problemlösungen oder versteckten Hinwiesen auf Lösungsansätze kann ich recht wenig anfangen, da ich u.U. die Ansätze mit meinen derzeitigen Kenntnissen (noch) nicht verstehe. Also, macht euch bitte die Mühe und antwortet so, daß es auch ein Dummy versteht. :-)

Ich habe mich bemüht, allerdings ist das Thema verteufelt verzwickt und die Lösung auch. Ich hoffe, ich habe mich nicht zu sehr vertimert :-)

Nö, ich habe, glaub ich, sehr gut verstanden, was du sagen wolltest. Wären alle Antworten so gut dokumentiert und aufbereitet. :-)))
Danke dir!

Kurt