jQuery-Navi/ 1 BTN anklicklben, andere sind nicht anklickbar

face2000 · 24.07.2017

Hallo PSD Community,

ich versuche es irgendwie einfach zu erklären:

Ich habe eine Navigation mit 6 <a href="">Home</a> Schaltflächen. Ich benötige ein jQuery Script welches das Anklicken andere Buttons verhindert.

Wenn ich beispielsweise auf Home klicke, soll eine Aktion durchgeführt werden. Innerhalb dieser Zeit, dürfen alle weiteren Buttons nicht anklickbar sein, erst wenn die Aktion von Home zu Ende durchgeführt wird, sollen die anderen Buttons wieder normal anklickbar sein.

Versteht Ihr was ich meine?

Beste Grüße

AliceG · 24.07.2017

Als eine „Quick & Dirty“ Lösung:
Du könntest den Links in der Navigation eine klasse verpassen z.B. „no-click“ und diese mit event.preventDefault() deaktivieren.
Dann ermitteln ob z.B. Footer existiert und erst dann die Klasse „no-click“ entfernen.

Allerdings würde ich dir dringend abraten die Links während des Loads zu deaktivieren. Kein User da draußen wird das gut finden wenn er aus Versehen einen falschen Navigationspunkt geklickt hat und erst warten muss bis die Seite geladen ist um ein anders Navigationspunkt zu wählen.

face2000 · 24.07.2017

AliceG schrieb:
Als eine „Quick & Dirty“ Lösung:
Du könntest den Links in der Navigation eine klasse verpassen z.B. „no-click“ und diese mit event.preventDefault() deaktivieren.
Dann ermitteln ob z.B. Footer existiert und erst dann die Klasse „no-click“ entfernen.

Allerdings würde ich dir dringend abraten die Links während des Loads zu deaktivieren. Kein User da draußen wird das gut finden wenn er aus Versehen einen falschen Navigationspunkt geklickt hat und erst warten muss bis die Seite geladen ist um ein anders Navigationspunkt zu wählen.

Ich benötige es unbedingt. Weil die Aktionen die durchgeführt werden nicht "gestört" werden sollen.

Bei einem Klick verschwindet der Content von rechts nach links. Wenn ein User wild rum klickt, kommt mein Script irgendwie nicht klar und spielt verrückt.

AliceG · 24.07.2017

face2000 schrieb:
Bei einem Klick verschwindet der Content von rechts nach links. Wenn ein User wild rum klickt, kommt mein Script irgendwie nicht klar und spielt verrückt.

hmmm ... vielleicht wäre dann aber besser den Click Event per Skript zu beobachten und dem entsprechend an der Animation der Seite etwas zu optimieren.
Wenn deine Animation durcheinander kommt bei einem Click auf ein Link, dann wäre es dringend empfohlen dies zu korrigieren. Die Funktionalität von Links (Navigation) auszuschalten, ist keine dauerhafte Lösung.
Kann man sich deine Seite irgendwo im Netz anschauen?

face2000 · 24.07.2017

AliceG schrieb:
hmmm ... vielleicht wäre dann aber besser den Click Event per Skript zu beobachten und dem entsprechend an der Animation der Seite etwas zu optimieren.
Wenn deine Animation durcheinander kommt bei einem Click auf ein Link, dann wäre es dringend empfohlen dies zu korrigieren. Die Funktionalität von Links (Navigation) auszuschalten, ist keine dauerhafte Lösung.
Kann man sich deine Seite irgendwo im Netz anschauen?

So schaut die Aktion aus:

$('#content').animate({'margin-left' : '100%'}, 1500);

AliceG · 25.07.2017

face2000 schrieb:
$('#content').animate({'margin-left' : '100%'}, 1500);

aaaa verstehe, du verwendest die Animation Funktionen von jQuery.
Vielleicht wäre besser wenn du dir noch das TweenMax Framework für Animationen dazu holst. JQuery ist, was Animationen betrifft, nicht so stark.
Hier ein Link zu TweenMax: https://greensock.com/tweenmax

Mit TweenMax hast du volle Kontrolle darüber was vor der Animation, während der Animation und danach passieren kann/soll.
Darüberhinaus sind die Transitions bei TweenMax sehr flüßig (smooth) was bei jQuery leider nicht der Fall ist.
Ich persönlich mag jQuery wegen Selektoren, für Animationen verwende ich aber ausschließlich TweenMax.
Check doch dort die Beispiele, Dokumentation, Tutorials, da findest du bestimmt was für dich.

Habe gerade was gefunden, was wie für dich geschaffen ist ;-)
https://github.com/janpaepke/ScrollMagic/wiki/Tutorial-:-Anchor-Navigation
Check das "Live example" davon:

Myhar · 25.07.2017

Wieso wird für solche Animationen nicht CSS verwendet? Mit JS wechselt man eine Klasse und diese Klasse triggert dann die CSS Animation. Dann braucht man auch keine Animations-Frameworks einbinden.

AliceG · 25.07.2017

Myhar schrieb:
Wieso wird für solche Animationen nicht CSS verwendet? Mit JS wechselt man eine Klasse und diese Klasse triggert dann die CSS Animation. Dann braucht man auch keine Animations-Frameworks einbinden.

Klar, wäre auch eine Alternative :nick:

Ich denke es ist auch einfach so etwas wie Vorliebe und/oder Gewohnheit welche Technik man dafür wählt.
Mit TweenMax kann man halt sehr, sehr, sehr viel machen, und CSS Animationen und Transitions konnte man bis noch vor nicht lange her halt nur für bestimmte Browser einsetzten.

Nachtrag:
Ein weiteres schönes Beispiel für dich @face2000 wäre das hier:
http://woosterwebdesign.com/parallax-sliding-effect-using-tweenlite-js/
und das Demo dazu: http://www.woosterwebdesign.com/experiments/landscape.html

face2000 · 26.07.2017

Myhar schrieb:
Wieso wird für solche Animationen nicht CSS verwendet? Mit JS wechselt man eine Klasse und diese Klasse triggert dann die CSS Animation. Dann braucht man auch keine Animations-Frameworks einbinden.

Das heißt, mit einem Click auf einem Button folgt ein "addclass". Der wiederum wird über CSS3 gesteuert bzw. wird das Objekt mit CSS3 bewegt.

Problem an der Geschichte, während eine Animaton läuft, dürfen keine weiteren Buttons getätigt werden, sonst spielen die Animationen verrückt.

Ich möchte meinen Hauptcontent mit Überschriften und Fließtext per Schaltfläche Ändern lassen.

@

Danke nochmal. Ich werde mich auf jeden Fall mit TweenMax beschäftigen.

Edit:

Wundervoll @AliceG

Genau, das habe ich gesucht =) Vielen Dank.
http://woosterwebdesign.com/parallax-sliding-effect-using-tweenlite-js/
und das Demo dazu: http://www.woosterwebdesign.com/experiments/landscape.html[/QUOTE]

Edit: Wobei ich sagen muss, dass der Slider nicht responsive fähig ist. Meine native HTML Seite passt sich allen Geräten an. Aber ich werde ein wenig rum fummeln.

face2000 · 26.07.2017

Nachtrag:

@

Mit dem Tweenlite hat es wunder funktioniert. Wir haben demnach die Lösung gefunden. Ich möchte mich dafür bedanken.
Vielen Dank.

AliceG · 27.07.2017

face2000 schrieb:
Mit dem Tweenlite hat es wunder funktioniert. Wir haben demnach die Lösung gefunden. Ich möchte mich dafür bedanken.
Vielen Dank.

@face2000 freut mich, dass ich dir helfen konnte.
Na ja war von mir nur ein "Schubser" in die richtige Richtung.
Die Arbeit hast du ja selbst gemacht. Finde ich super. :daumenhoch

Poste mal ein Link, wenn man schon irgendwo deine Seite bewundern kann.

Myhar · 03.08.2017

Ich weiß, eine Lösung wurde bereits gefunden, aber:

face2000 schrieb:
Problem an der Geschichte, während eine Animaton läuft, dürfen keine weiteren Buttons getätigt werden, sonst spielen die Animationen verrückt.

Wieso spielen sonst die Animationen verrückt? Hast du hier ein praktisches Beispiel wo man sich das ansehen kann? Das sollte eigentlich nicht sein.

Curanai · 03.08.2017

Hi in die Runde - hier ist der Binärklempner aus dem Norden.

Wenn man eine multiple Animation in einen Bereich feuert, kollidiert das selbstredend, wenn da bereits eine läuft. Darum sollte man gern .stop() (vor animate() im Chaining) für sich entdecken. Ebenfalls gebe ich hier gern diese tollen Promises mal in den Raum - direkt am Objekt gibt es dann ein .promise().done() ... aber die nur als Idee (native als ECMA2015 sowie in jQuery enthalten).

Meine Lieblingslösung - hilft auch gegen Dummbeutel mit Doppelklick bei asynchronen Aktionen - ist ein Flag im JavaScript; also einfach ein Integer, welches 0 oder 1 hat. Hat es 1, wird offenbar gerade was ausgeführt (was nach Fertigstellung auf 0 setzt). Hat es 0, auf 1 setzen und ausführen. Es ist wirklich so simpel.

Wer mir jetzt aber mit "jaaaaa, aber wenn JavaScript nicht aktiviert ist ... " kommt. der stößt auf Granit.

Sooo ... und - weil es Spaß macht - noch ein Hinweis: Wenn Du mit CSS-Keyframes (für umfangreichere Animationen) anfängst, wirst Du feststellen, dass $.addClass und das Pendant $.removeClass() nicht helfen. Es funktoniert nur ein einziges Mal (getestet auf aktuellem IE sowie FF; die sind gerade etwas zickiger als andere). Die Lösung gleich mitgeliefert:
1. remove css-class mit Keyframes-Animation,
2. offsetWidth vom selektierten Element holen (aber void'en),
3. addClass mit Animation

Läuft es nur 1x, war mein Hinweis uninteressant - aber es kann ja u. U. mehrfach laufen (war ja ein Menü, nech?).

Binärlastige Grüße

Myhar · 03.08.2017

Curanai schrieb:
Sooo ... und - weil es Spaß macht - noch ein Hinweis: Wenn Du mit CSS-Keyframes (für umfangreichere Animationen) anfängst, wirst Du feststellen, dass $.addClass und das Pendant $.removeClass() nicht helfen. Es funktoniert nur ein einziges Mal (getestet auf aktuellem IE sowie FF; die sind gerade etwas zickiger als andere). Die Lösung gleich mitgeliefert:
1. remove css-class mit Keyframes-Animation,
2. offsetWidth vom selektierten Element holen (aber void'en),
3. addClass mit Animation

Läuft es nur 1x, war mein Hinweis uninteressant - aber es kann ja u. U. mehrfach laufen (war ja ein Menü, nech?).

Binärlastige Grüße

Ich kann hier keine wirkliche Lösung erkennen, lediglich eine Beschreibung von einzelnen Schritten. Gibt es hier auch Code um das nachvollziehen zu können?

Hier mal ein Code von mir, da wird die CSS Animation so oft ausgeführt wie man will. Einfach folgenden Code auf zB jsfiddle.net einfügen (und bei Javascript nicht vergessen, jquery auszuwählen, sonst funktioniert es natürlich nicht)

Code:

HTML:

<button id="toggle">
Toggle
</button>

<div id="toggleMe">

</div>

JS: 
$(function() {
   $('#toggle').on("click", function(){
      $("#toggleMe").toggleClass("toggled");
   })
});


CSS: 
div{
  width: 30%;
  transition: all .3s;
  background-color: green;
  height: 100px;
}

div.toggled{
  width: 50%;
}

Curanai · 03.08.2017

Meeeh. Ich nehme alles zurück und behaupte das Gegenteil. Vergesst es mit den Keyframes ... !!! Da wollte ich Dir gerade einen Fiddle schrauben und dann ging es mit $.toggle(). Dann setzte ich ein add-/removeClass-Button daneben - und der ging auch. WTF?!

Ich schiebe es mal auf die Simplizität, denn ich hab es nicht grundlos geschrieben. Vor zwei Tagen habe ich eine Micro-Tansaction auf diesem Wege in die UX pressen wollen und es ging gerade mal ein einziges Mal. Es half nur der beschriebene Umweg mit offsetWidth als Trick. Und das weiß ich darum so genau, da ich auch die Klassenvergabe über Konsole etc. probiert hatte. Nichts ging da - nur einmal. Im Fiddle läuft es problemlos ... !

Tjoar, Du siehst ... ich würd' gern knallharte Fakten jetzt liefern, aber entweder liegt's an Fiddle (dass dort mehr gemacht bzw. anders aktualisiert wird im DOM) oder an der Einfachheit.

Curanai · 03.08.2017

Sorry, nochmal ich bezüglich der Verwirrung.

Auslöser dafür ist, dass ein direkter zweiter (falscher) Klick die Animation nochmals feuern sollte. Ich sprach von einer Micro-Transaction für die UX - in diesem meinen Falle eine verneinende Animation auf eine Auswahl des Users.

Es funktioniert NICHT (proofed!), wenn man hier mit removeClass/addClass arbeitet; es hilft auch promise() und done() gar nichts. $.toggleClass() kann hier nicht helfen, da der zweite Klick die Klasse entfernen würde - aber eben nicht animiert (was er müsste). Noch zum besseren Verständnis: Es ging hier um ein zu wählendes Datum. Liegt das Datum für das Vorhaben schlecht, wird verneinend animiert. Der Kalender bleibt bis zur Wahl eines geeigneten Datums geöffnet und soll je Klick animieren (was er jetzt macht).

"je Klick animieren" funktioniert nicht - nicht ohne den erwähnten Trick bzgl. offsetWidth.

So ... und hier ist jetzt das Fiddle dazu: fiddeling