Scope Networks

Ich habe eine Webseite mit einem Menü links und oben erstellt. Sobald man auf einen Menüpunkt oben klickt, soll sich der content links und in der mitte austauschen per ajax. Das funktioniert soweit. Dann fand ich es schön, dass wenn man oben auf das Menü klickt, das linke Menü per scriptaculous Effect erscheint (Grow in diesem Fall).

Also man klickt oben auf einen Menüpunkt und das linke Menü soll per Animation sich ausklappen. Das funktioniert solange, bis man das Menü oben schnell doppelt klickt – oder bei mehreren Menüpunkten – schnell zwischen Menüpunkten wechselt. Dann tritt der Effekt auf, dass das linke Menü nichtmehr richtig dargestellt wird.

Nach langem tüfteln habe ich dafür eine Lösung gefunden:

Bei einem ajax link im oberen Menü, kommt in das “before” attribut ein funktionsaufruf der folgenden funktion rein:


var menuEffectCount = 0;

function showLeftMenu() {
var duration = 1;
menuEffectCount=menuEffectCount+1;
if(menuEffectCount==1) {
new Effect.Grow(‘left_menu_wrapper’, {duration: duration});
window.setTimeout(‘menuEffectCount=0;’, (duration+0.5)*1000);
}
}

duration: laufzeit des effektes
menuEffectCount: anzahl der aktuell ausgeführten effekte für das Menü (darf immer nur 1 sein)
left_menu_wrapper’: ist die ID meines Menüs
window.setTimeout: setzt nach (duration+0.5)*1000 ms menuEffectCount wieder auf 0

Somit kann man klicken wie man will, der Effekt wird immer bis zum Ende ausgeführt, bevor der nächste starten kann.