Problem mit Toggle-Button
jbaben
Problem mit Toggle-Button
jbaben
Gunnar Bittersmann
Rolf B
Matthias ScharwiesHallo,
ich habe mir von dieser Seite On/Off FlipSwitch einen Toggle-Button erstellt: CSS-Code
<style>
<!-- Toogle-Button GEYSER ON/OFF -->
.onoffswitch {
position: relative; width: 140px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 40px; padding: 0; line-height: 40px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "GEYSER ON";
padding-left: 10px;
background-color: #0000FF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "GEYSER OFF";
padding-right: 10px;
background-color: #FF0000; color: #00FF00;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 20px; margin: 10px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 96px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
</style>
HTML-Code
<body>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</body>
Nun möchte ich aber mit diesem Code einen zweiten Toggle-Button (mit anderem Text und Farben) darstellen.
Wie kann ich das erreichen ?
Wenn ich für den zeiten Toggle-Button anstatt "onoffswitch" "onoffswitch_L" verwende und folgenden HTML-Code verwende:
<div class="onoffswitch_L">
<input type="checkbox" name="onoffswitch_L" class="onoffswitch_L-checkbox" id="myonoffswitch_L" checked>
<label class="onoffswitch_L-label" for="myonoffswitch_L">
<span class="onoffswitch_L-inner"></span>
<span class="onoffswitch_L-switch"></span>
</label>
</div>
wird zwar ein zweiter Toggle-Button dargestellt, sieht aber nicht so aus wie der Original Toggle-Button und am rechten Bildschirmrand tauchen weitere Button's auf (senkrecht).
MfG
Juergen B. ⁉️
-
Lieber jbaben,
das
class-Attribut gibt Dir die Möglichkeit, alle Elemente, die diese Klasse haben, mit dafür passenden Regeln zu stylen. Ein zweiter Button sollte also eigentlich kein Problem sein. Lass uns schauen, wo Du genau scheiterst.<!-- Toogle-Button GEYSER ON/OFF --> .onoffswitch { position: relative; width: 140px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; }Dein CSS-Code enthält ungültige Code-Teile. Ein HTML-Kommentar ist nur in HTML ein Kommentar, in CSS notiert man Kommentare anders.
Dein CSS-Code geht also von einem Element aus, das die Klasse
onoffswitchhat. In Deinem HTML ist das ein<div>:<div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> <label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div>Es handelt sich hier also um verschiedene Elemente, die alle unter dem Elternelement mit der Klasse
onoffswitchversammelt sind. Ein Klonen sollte bereits einen zweiten Toggle-Button ergeben:<div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> <label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div><!-- zweiter Toggle-Button mit anderem name-Attributwert: --> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" checked> <label class="onoffswitch-label" for="myonoffswitch2"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div>Warum scheitert das bei Dir? Oder scheitert es nicht und Du hast eigentlich ein anderes (visuelles?) Problem?
Was mir sonst noch so aufgefallen ist, sind die vielen Klassen-Namen, die eigentlich die Sache nur verkomplizieren:
- class="onoffswitch"
- class="onoffswitch-checkbox"
- class="onoffswitch-label"
- class="onoffswitch-inner"
- class="onoffswitch-switch"
Genau genommen genügt die Klasse
onoffswitchfür alles. Man kann in CSS nämlich mittels des Nachfahren-Selektors ebenso aufonoffswitch-checkboxoderonoffswitch-labeleinwirken. Die beiden<span>innerhalb von<label>kann man mit nth-of-type() selektieren, so dass Dein CSS vielleicht etwas komplizierter aussehen mag (wenn man es vernünftig formatiert, ist es sogar noch übersichtlicher), dafür aber das HTML besser klonbar:<div class="onoffswitch"> <input type="checkbox" name="onoffswitch" id="myonoffswitch" checked> <label for="myonoffswitch"> <span></span> <span></span> </label> </div> <!-- zweiter Toggle-Button mit anderem name-Attributwert: --> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch2" id="myonoffswitch2" checked> <label for="myonoffswitch2"> <span></span> <span></span> </label> </div>Und nun das verbesserte CSS:
/* Toogle-Button GEYSER ON/OFF */ /* Das Elternelement, das den Button realisiert */ .onoffswitch { position: relative; width: 140px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } /* das <input> Element */ .onoffswitch input { display: none; } /* das <label> Element */ .onoffswitch label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; } /* das erste <span> Element */ .onoffswitch span:nth-of-type(1) { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch span:nth-of-type(1):before, .onoffswitch span:nth-of-type(1):after { display: block; float: left; width: 50%; height: 40px; padding: 0; line-height: 40px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } .onoffswitch span:nth-of-type(1):before { content: "GEYSER ON"; padding-left: 10px; background-color: #0000FF; color: #FFFFFF; } .onoffswitch span:nth-of-type(1):after { content: "GEYSER OFF"; padding-right: 10px; background-color: #FF0000; color: #00FF00; text-align: right; } /* das zweite <span> Element */ .onoffswitch span:nth-of-type(2) { display: block; width: 20px; margin: 10px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 96px; border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s; } .onoffswitch input:checked + label span:nth-of-type(1) { margin-left: 0; } .onoffswitch input:checked + label span:nth-of-type(2) { right: 0px; }Damit sollte es besser klappen. [Beweis]
Liebe Grüße,
Felix Riesterer.
-
@@Felix Riesterer
/* das <input> Element */ .onoffswitch input { display: none; }Damit sollte es besser klappen.
Du solltest es inzwischen besser wissen. Damit klappt es nicht.
Aber getestet hast du das nicht?
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Lieber Gunnar,
display: none;
Du solltest es inzwischen besser wissen. Damit klappt es nicht.
stimmt, da war doch noch was. Du weißt, wie dieses Detail besser zu lösen ist. Bitte schreib' es doch das nächste Mal gleich dazu. Ich konnte es mir offensichtlich nicht merken. :-/
Aber getestet hast du das nicht?
Zugegeben nur flüchtig in einem Desktop-FF.
Liebe Grüße,
Felix Riesterer.
-
@@Felix Riesterer
Du weißt, wie dieses Detail besser zu lösen ist. Bitte schreib' es doch das nächste Mal gleich dazu.
Hatte ich doch (im anderen Posting).
Aber getestet hast du das nicht?
Zugegeben nur flüchtig in einem Desktop-FF.
Desktop ist doch prädestiniert dafür, auch mit Tastatur zu testen.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Lieber Gunnar,
Hatte ich doch (im anderen Posting).
das habe ich erst gesehen, als ich meine Antwort abgeschickt hatte. Du hast natürlich recht.
Desktop ist doch prädestiniert dafür, auch mit Tastatur zu testen.
Wieso? Wenn es mit der Maus doch klappt... ;-)
Liebe Grüße,
Felix Riesterer.
-
Ich leg schon mal das Popcorn raus...
Rolf
--
sumpsi - posui - clusi-
@@Rolf B
Ich leg schon mal das Popcorn raus...
Ich glaube, hier halten Felix und ich mal zusammen und enttäuschen dich. 😜
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-
-
-
-
@@Felix Riesterer
<!-- Toogle-Button GEYSER ON/OFF -->Dein CSS-Code enthält ungültige Code-Teile.
Wobei allerdings weder
<!--(CDO) noch-->(CDC) ungültig ist, sondern das dazwischen. [Grammar of CSS 2.2]<!-- html { display: none } -->ist valides CSS und …Ein HTML-Kommentar ist nur in HTML ein Kommentar
… du sagst es: es ist in CSS kein Kommentar, sondern wirkt, wie Sie sehen, sehen Sie nichts.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
@@jbaben
ich habe mir von dieser Seite On/Off FlipSwitch einen Toggle-Button erstellt:
Welcher nicht funktioniert. Nicht mit Tastatursteuerung. Die Macher haben folgenden schwerwiegenden Fehler gemacht:
.onoffswitch-checkbox { display: none; }Interaktive Elemente dürfen – wenn sie denn funktionieren sollen – niemals mit
display: noneodervisibility: hiddenversteckt, sondern nur visuell versteckt werden.Wenn du stattdessen
.onoffswitch-checkbox { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }angibst, sollte das Ding auch per Tastatur bedienbar sein.
Es ist aber immer noch kein Button. Screenreader lesen eine Checkbox vor.
Ich empfehle die Lektüre von Heydons Artikel zu Toggle-Buttons. Darin zeigt er auch, wie das mit
<button>geht.Wenn ich für den zeiten Toggle-Button anstatt "onoffswitch" "onoffswitch_L" verwende und folgenden HTML-Code verwende:
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Lieber Gunnar,
.onoffswitch-checkbox { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }habe Deine Anmerkung im Online-Beispiel umgesetzt: [Beweis]
Naja, das war schnell erledigt. Nicht jeder Neuling hier weiß, wie das geht. Vielleicht magst Du in Zukunft nicht nur auf dieses eher aufgeladene und damit negativ wirkende Posting verlinken, sondern auf eine Anleitung, wie man ein solches für die einfachere Lösungsfindung erstellt? Dabei darfst Du dann anstelle von jsFiddle Dein geliebtes Codepen einsetzen... :-)
Liebe Grüße,
Felix Riesterer.
-
@@Felix Riesterer
Vielleicht magst Du in Zukunft nicht nur auf dieses eher aufgeladene und damit negativ wirkende Posting verlinken, sondern auf eine Anleitung, wie man ein solches für die einfachere Lösungsfindung erstellt?
Muss ich dir schon das zweite Mal für heute recht geben? WTF?
Ich könnte mal in einem Blogartikel erläutern, warum ein Online-Beispiel besser ist als seinen Code ins Forum zu kippen. Obwohl – dafür ist vermutlich sogar das Wiki der bessere Platz.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Lieber Gunnar,
Obwohl – dafür ist vermutlich sogar das Wiki der bessere Platz.
Nein! Doch! Oh! ;-P @Rolf B: Wo war doch gleich Dein Popcorn?
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix Riesterer,
vielen Dank für Deine Hilfe und den geänderten Code. Funktioniert soweit, aber ein kleines Problem habe ich dabei noch: der zweite Toggle-Button soll den Text "LIGHT ON/LIGHT OFF" erhalten. Kannst Du mir das bitte noch ändern ?
Bei meinem CSS-Code (automatisch erstellt) war das Problem mit dem falschen Kommentar Tag. Mit dem richtigen Kommentar-Tag funktioniert auch mein Code.
Mein Code gefällt mir aber jetzt nicht mehr und ich werde Deinen Code verwenden.
Das mit dem Online-Beispiel muss ich noch ausprobieren.
MfG
Juergen B.
-
Lieber jbaben,
der zweite Toggle-Button soll den Text "LIGHT ON/LIGHT OFF" erhalten. Kannst Du mir das bitte noch ändern ?
der Text ist dummerweise im CSS-Code umgesetzt worden. Das ist natürlich ein fettes Problem, wenn da beliebiger Text bei beliebigen Schaltern stehen soll.
Ich habe das Fiddle stark überarbeitet, kann nun aber nicht garantieren, dass das in anderen Browsern als dem FF einigermaßen so aussieht. Dafür kann man nun aber im HTML-Code beliebige Beschriftungen vornehmen.
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix, vielen Dank für Deine tolle Arbeit. Den Text kann ich nun entsprechend ändern. Bei meinem Browser (Firefox V63.0.3 64 Bit) sehen die Buttons anders aus (gehen über die gesamte Breite, untereinander).
MfG
Juergen B.
-
-
-
-
Servus!
Vielleicht magst Du in Zukunft nicht nur auf dieses eher aufgeladene und damit negativ wirkende Posting verlinken, sondern auf eine Anleitung, wie man ein solches für die einfachere Lösungsfindung erstellt?
Muss ich dir schon das zweite Mal für heute recht geben? WTF?
Ich könnte mal in einem Blogartikel erläutern, warum ein Online-Beispiel besser ist als seinen Code ins Forum zu kippen. Obwohl – dafür ist vermutlich sogar das Wiki der bessere Platz.
@@Gunnar Bittersmann @@Felix Riesterer
Matthias Apsel und ich haben mal so einen Artikel angelegt:
- SELFHTML:Forum/online-Beispiele (Warum online-Beispiele besser als das Posten von Code sind)
Wollt ihr ihn weiter verbessern?
Herzliche Grüße
Matthias Scharwies
--
"I don’t make typos. I make new words."
-
-
-