Flip Card JS richtig einstellen

[horstmann]

Guten Tag , Auf der Seite, der Hauptseite, ganz unten, wo rechts 3 Bilder sind, die Bilder sind als Flip-Karte gemacht, sie werden durch KLICKEN umgedreht. Warum bei Klick auf die Bilder , erste Bild laesst sich flippen und zweite und dritte nicht ?

<script>
const card = document.querySelector(".card__inner");
card.addEventListener("click", function (e) {
card.classList.toggle('is-flipped');
});

</script>

 <div class="card w-full pl-2 pt-6 md:w-1/2 ">
<div class="card__inner ">
<div class=" rounded-lg">
<div class="card__face ">
<img class=" rounded-lg shadow-xl " src="media/img/kreieren_740.JPG"
alt="schuhe Kreieren">
</div>
<div class="card__face--back ">
<img class=" rounded-lg shadow-xl " src="media/img/frau_kreieneren_1_740.JPG"
alt="schuhe Kreieren">
</div>
</div>
</div>
</div>

[Gunnar Bittersmann]

@@horstmann

Auf der Seite, der Hauptseite, ganz unten, wo rechts 3 Bilder sind, die Bilder sind als Flip-Karte gemacht, sie werden durch KLICKEN umgedreht. Warum bei Klick auf die Bilder , erste Bild laesst sich flippen und zweite und dritte nicht ?

Weil

const card = document.querySelector(".card__inner");

das erste Element liefert, das dem Selektor entspricht.

Du möchtest aber alle Elemente haben, die dem Selektor entsprechen und für jedes einen Eventhandler registrieren. Oder dies in einer Schleife tun.

Oder event delegation verwenden, d.h. nur einen Eventhandler für ein gemeinsames Vorfahrenelement registrieren und in der Handlerfunktion abfragen, ob der Click auf einem Bild ausgelöst wurde.

An der Stelle der Hinweis, dass div keine interaktiven Elemente sind und i.A. nicht als Auslöser von Interaktionen herangezogen werden dürfen – es verwenden ja nicht alle Nutzer eine Maus o.ä. Zeigegerät. Per Tastatur lässt sich ein div (ohne weiteres) nicht ansteuern.

Hier aber die Frage: Wozu der Effekt? Wem ist damit geholfen? Mir scheint: niemandem. Der Effekt ist nur um seiner selbst Willen da – ein sehr schwaches Argument, sowas zu implementieren.

😷 LLAP

[horstmann]

wie soll ich dann machen , damit per Klick die Karte gedreht wird ? Gibst eine Varinate ohne js ?

[Tabellenkalk]

Hallo,

wie soll ich dann machen

Hat Gunnar doch geschrieben: du sollst gar nicht! Es ist jedenfalls nicht ersichtlich, wofür der Effekt nötig ist.

Solltest du doch einen Grund haben, dann ist wohl tatsächlich js zu verwenden und als interaktive Elemente im HTML wären Buttons angebracht.

Gruß
Kalk

[klawischnigg]

Hi there,

wie soll ich dann machen

Hat Gunnar doch geschrieben: du sollst gar nicht! Es ist jedenfalls nicht ersichtlich, wofür der Effekt nötig ist.

Sorry, aber das geht imho etwas zu weit. Oder willst Du tatsächlich den Eindruck stehen lassen, daß man nur implementieren sollte, dessen Notwendigkeit Dir oder dem Gunnar ersichtlich ist? Das kann's ja nicht wirklich sein...

[Gunnar Bittersmann]

@@klawischnigg

Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden. Protip: was trinken, kühles Bad/Dusche.

😷 LLAP

[klawischnigg]

Hi there,

Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden. Protip: was trinken, kühles Bad/Dusche.

Als jemand, dessen Domizil den Gestaden der Adria nur zweieinhalb Autostunden fern ist, kann ich nur sagen, mich können wir nicht meinen - ich tippe bereits auf einer Unterwassertastatur...

[Gunnar Bittersmann]

@@klawischnigg

Als jemand, dessen Domizil den Gestaden der Adria nur zweieinhalb Autostunden fern ist, kann ich nur sagen, mich können wir nicht meinen

Nein, das tun wir nicht. Du kannst schreiben, was du willst. Du bist nicht verantwortlich dafür, dass andere nicht mit der Bewertungsfunktion klarkommen.

• ich tippe bereits auf einer Unterwassertastatur...

Deine Tastatur ist schweißgebadet?

😷 LLAP

[klawischnigg]

Hi there,

• ich tippe bereits auf einer Unterwassertastatur...

Deine Tastatur ist schweißgebadet?

Ja, die fürchtet sich vor mir. Aber unter Wasser merkt man's nicht...

[kai345]

printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden.

Fast bin ich geneigt, Teile eines Statements von Joschka Fischer vom 18. Oktober 1984 zu zitieren.

/K

[Mitleser 2.0]

Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden.

Fast bin ich geneigt, Teile eines Statements von Joschka Fischer vom 18. Oktober 1984 zu zitieren.

$statement =~ s/Herr Präsident, //;

[kai345]

printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden.

Fast bin ich geneigt, Teile eines Statements von Joschka Fischer vom 18. Oktober 1984 zu zitieren.

1. Die Motivation, weshalb hier Nutzer eine Fremdbeitrag (aka nicht von ihm verfasst) bewerten, geht Gunnar genau gar nichts an

2. Nutzer in übelster Weise zu beleidigen (siehe Zitat ganz oben) und sie als durch die Hitze quasi geistig unzurechnungsfähig oder körperlich behindert darzustellen, nur weil sie einen Beitrag positiv bewerten, welcher offensichtlich seiner Meinung nicht begeistert zustimmt, ist unterstes Niveau und nicht zu dulden.

/K

[JürgenB]

Hallo

warum regst du dich so auf? Gunnar war der einzige, der konstruktiv geantwortet hat.

Gruß
Jürgen

[kai345]

printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

warum regst du dich so auf? Gunnar war der einzige, der konstruktiv geantwortet hat.

Du hältst also Beleidigungen wie

Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden.

sowie

Nein, das tun wir nicht. Du kannst schreiben, was du willst. Du bist nicht verantwortlich dafür, dass andere nicht mit der Bewertungsfunktion klarkommen.

für konstruktiv?

/K

[Gunnar Bittersmann]

@@kai345

Beleidigungen wie […]

Nein, das tun wir nicht. Du kannst schreiben, was du willst. Du bist nicht verantwortlich dafür, dass andere nicht mit der Bewertungsfunktion klarkommen.

Dass das eine Beleidigung sein soll, halte ich für eine Lüge.

😷 LLAP

[kai345]

printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

Beleidigungen wie […]

Nein, das tun wir nicht. Du kannst schreiben, was du willst. Du bist nicht verantwortlich dafür, dass andere nicht mit der Bewertungsfunktion klarkommen.

Dass das eine Beleidigung sein soll, halte ich für eine Lüge.

Leuten, welche eine dir nicht genehme Bewertung abgeben, zu unterstellen, sie kämen deshalb nicht mit der Bewertungsfunktion klar (implizit: wären also zu dumm dazu) ist definitiv beleidigend.

Und mir jetzt Lüge zu unterstellen ist einfach nur erbärmlich.

/K

[Gunnar Bittersmann]

@@kai345

Beleidigungen wie […]

Nein, das tun wir nicht. Du kannst schreiben, was du willst. Du bist nicht verantwortlich dafür, dass andere nicht mit der Bewertungsfunktion klarkommen.

Dass das eine Beleidigung sein soll, halte ich für eine Lüge.

Leuten, welche eine dir nicht genehme Bewertung abgeben, zu unterstellen, sie kämen deshalb nicht mit der Bewertungsfunktion klar (implizit: wären also zu dumm dazu) ist definitiv beleidigend.

Definitiv nicht. Das ist eine Tatsachenbehauptung. Der mag man zustimmen oder nicht.

Und mir jetzt Lüge zu unterstellen ist einfach nur erbärmlich.

Halt mal den Ball flach.

😷 LLAP

[Gunnar Bittersmann]

@@kai345

1. Die Motivation, weshalb hier Nutzer eine Fremdbeitrag (aka nicht von ihm verfasst) bewerten, geht Gunnar genau gar nichts an

1. Wenn die Motivation für Pluspunkte allein die ist, dass betreffendes Posting gegen mich geschossen hat, dann geht mich das schon ein kleines Bisschen was an.

2. Nutzer in übelster Weise zu beleidigen (siehe Zitat ganz oben) und sie als durch die Hitze quasi geistig unzurechnungsfähig oder körperlich behindert darzustellen

2. Ich habe all meine Gutmütigkeit zusammengenommen und es aufs Wetter geschoben. Ob ich wirklich denke, dass es am Wetter liegt, werden wir nie erfahren.

„Übelste Beleidigung“?? Nun lass mal die Kirche im Dorf! Wenn ich das vorgehabt hätte, hätte das ganz anders geklungen.

😷 LLAP

[dedlfix]

Tach!

Es ist nicht zu erwarten, dass Gunnar Einsicht zeigt. Deshalb schließe ich an dieser Stelle den Teilthread, da eine weitere Diskussion vergebliche Liebesmüh ist.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Es ist nicht zu erwarten, dass Gunnar Einsicht zeigt. Deshalb schließe ich an dieser Stelle den Teilthread, da eine weitere Diskussion vergebliche Liebesmüh ist.

Deine persönliche Ansicht, dass ich es wäre, der hier Einsicht zeigen müsste. Ich teile deine Ansicht nicht. Und andere Moderatoren auch nicht.

Es schickt sich nicht für einen Moderator, seine persönliche Ansicht kundzutun und gleichzeitig den Thread für Erwiderungen darauf zu schließen.

😷 LLAP

[Gunnar Bittersmann]

@@klawischnigg

Sorry, aber das geht imho etwas zu weit. Oder willst Du tatsächlich den Eindruck stehen lassen, daß man nur implementieren sollte, dessen Notwendigkeit Dir oder dem Gunnar ersichtlich ist? Das kann's ja nicht wirklich sein...

Nein, und das ist es auch nicht.

Ich hatte das Argument angeführt: „Wem ist damit geholfen? Mir scheint: niemandem.“

Wenn du ein stichhaltiges Argument vorbringen kannst, wie dieser Effekt zum Thema der Seite passen und die UX verbessern sollte, dann her damit! Dann können wir eine vernünftige sachliche Diskussion führen.

😷 LLAP

[Gunnar Bittersmann]

@@horstmann

wie soll ich dann machen , damit per Klick die Karte gedreht wird ?

Na wie geschrieben:

const cards = document.querySelector(".card__inner");

cards.forEach(card => {
  card.addEventListener(…);
});

oder

const cards = document.querySelector(".card__inner");

for (let card of cards) {
  card.addEventListener(…);
}

oder eben event delegation.

---

Gibst eine Varinate ohne js ?

Da den Effekt niemand(!!) braucht, könnte man hier vielleicht ausnahmsweise den checkbox hack verwenden und label und input per role="presentation" ihre Rollen wegnehmen? ☞ Spieglein, Spieglein an der Wand …

Beachte, die Spielerei in einen @media not (prefers-reduced-motion)-Block einzuschließen. Das gilt auch für die JavaScript-Variante.

😷 LLAP

PS: Du plenkst. Im Deutschen steht vor Fragezeichen kein Leerzeichen.

[horstmann]

Dane fuer Ihe Hilfe , das werde ich auch mal versuchen. Aber inzwischen habe ich so die Sache geloest document.querySelectorAll(".card__inner").forEach(c => c.onclick = function () { this.classList.toggle('is-flipped') })

[Gunnar Bittersmann]

@@horstmann

Aber inzwischen habe ich so die Sache geloest document.querySelectorAll(".card__inner").forEach(c => c.onclick = function () { this.classList.toggle('is-flipped') })

Du solltest nicht onclick verwenden, sondern addEventListener. Ein Grund ist, dass addEventListener – wie der Name schon sagt – EventListener hinzufügt und nicht andere möglicherweise vorhandenen überschreibt.

Außerdem: sprechende Variablen verwenden:

• nicht c, sondern card
• nicht e, sondern event (gilt auch für die Beispiele im verlinkten Artikel von David Walsh)

😷 LLAP

[Rolf B]

Hallo Gunnar,

Spieglein, Spieglein an der Wand …

Bin ich der einzige, bei dem die @media (prefers-reduced-motion) Query in Chrome (Version 91) nicht funktioniert?

Ich habe es mit Gunnars Fassung, mit (prefers-reduced-motion:reduce) und mit screen and not (...) probiert. Ich habe im Netz geschaut, ob Chrome einen speziellen Schalter braucht. Nix. Aber im Spieglein Spieglein Codepen werden die Regeln in den media Queries nicht beachtet.

Ich habe auch noch eine Anti-Query hinzugefügt: @media (prefers-reduced-motion), um im Positiv-Fall etwas sichtbares zu erzeugen - nix.

FF tut es. Chrome nicht. Edge nicht. Opera auch nicht. Also - alle Chromia nicht. Wasn das?

Mein Bastel-Fiddle dazu

Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Hier aber die Frage: Wozu der Effekt? Wem ist damit geholfen? Mir scheint: niemandem. Der Effekt ist nur um seiner selbst Willen da – ein sehr schwaches Argument, sowas zu implementieren.

Meine Einschätzung erfolgte anhand der Darstellung in meinem Browser: Firefox. Da blickt man nach der Drehung auf die Rückseite desselben Bilds, d.h. man sieht dessen Spiegelbild.

@Rolf B wies mich darauf hin, dass da doch zwei verschiedene Bilder auf Vorder- und Rückseite seien. Huch‽ Im Browser, den ich tunlichst meide wie die Covid-19, sind da tatsächlich zwei verschiedene Bilder – wobei es beim Umdrehen flackert. Im Safari flackert’s nicht, da springt’s um.

Das Flackern in Chrome liegt daran, dass du backface-visibility: hidden für das erste <div class="card__face"> gesetzt hast, aber nicht für das zweite <div class="card__face--back">.

Wenn man BEM nutzt, ist die Klassenangabe auch falsch: “Add modifier classes only to blocks/elements they modify, and keep the original class.” [BEM] Es müsste <div class="card__face card__face--back"> sein.

Das Umspringen in Safari kommt daher, dass der backface-visibility noch nicht kennt, sondern nur -webkit-backface-visibility. [CanIUse] Also beides angeben.

Warum das im Firefox nicht funktioniert, ist mir noch ein Rätsel. Zumal man durch backface-visibility: hidden die Rückseite (d.h. das Spiegelbild) doch eigentlich gar nicht sehen können sollte … 🤔

😷 LLAP

[Raketen-Asterix]

@dedlfix : Es ist nicht zu erwarten, dass Gunnar Einsicht zeigt.

Offen gestanden ist das nicht zu erwarten, weil er auch sehr gute Argumente auf seiner Seite hat. Man könnte deshalb genau so gut vortragen, dass nicht zu erwarten sei, dass andere Einsicht zeigen. In Glaubenskriegen findet genau das ja gegenseitig statt...

@Gunnar Bittersmann: Es schickt sich nicht für einen Moderator, seine persönliche Ansicht kundzutun und gleichzeitig den Thread für Erwiderungen darauf zu schließen.

Jepp! Aber es ist nicht nur das: Bei einem solchen Eingriff sollte man wirklich alles vermeiden, wodurch sich jemand persönlich „bekrittelt“ fühlen könnte.

Ich will nur, dass meine Auffassung zur Kenntnis genommen wird. Was dann mit dem Beitrag geschieht ist mir egal - was hingegen mit der Nachricht geschieht ist es nicht.

[kai345]

printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

gemeldet.

es ist schlimm genug, daß Gunnar seine technische Macht mißbraucht, um in einem dankenswerterweise gesperrten Thread doch noch das letzte Wort zu haben, das Thema dann in einem anderen Teilthread wieder aufzumachen ist vorsätzliches ignorieren der Sperrung

/K

[Gunnar Bittersmann]

@@kai345

daß Gunnar seine technische Macht mißbraucht, um in einem dankenswerterweise gesperrten Thread doch noch das letzte Wort zu haben

war eine Reaktion auf dedlfix’ Machtmissbrauch, um in einem dankenswerterweise gesperrten Thread noch das letzte Wort zu haben. Und ich will @dedlfix hier nicht einmal böse Absicht unterstellen.

😷 LLAP

[kai345]

printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

daß Gunnar seine technische Macht mißbraucht, um in einem dankenswerterweise gesperrten Thread doch noch das letzte Wort zu haben

war eine Reaktion auf dedlfix’ Machtmissbrauch, um in einem dankenswerterweise gesperrten Thread noch das letzte Wort zu haben. Und ich will @dedlfix hier nicht einmal böse Absicht unterstellen.

Schreibt es und unterstellst gleichzeitig dedlfix hier sowohl Machtmissbrauch wie auch "daß er das letzte Wort haben will", obwohl er in diesem Thread nicht einmal mitdiskutiert hat. Abenteuerlich.

/K

[Raketen-Asterix]

Was ich auf keinen Fall wollte ist, dass sich nun gegenseitig neue Vorwürfe gemacht werden.

Also: Ab an/in den/die See, oder was sonst für die Kühlung von Kopf und Körper geeignet ist. Verzeiht Euch selbst und den anderen.

Wie ich die Dinge sehe sollte man die unangenehmen bzw. fachfreien Teile der Diskussion (darunter der von mir begonnene Teilzweig) auch kommentarlos entfernen. Der kann nur dazu dienen, unangenehme Gefühle - auch bei Dritten) zu wecken.

[JürgenB]

Hallo,

ich denke, es wurde alles gesagt, wenn auch noch nicht von jedem. Ich mache dann mal zu.

Gruß
Jürgen