tag:forum.selfhtml.org,2005:/self
Problem mit Toggle-Button – SELFHTML-Forum
2018-12-29T09:17:57Z
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736939#m1736939
jbaben
2018-11-22T15:35:04Z
2018-11-22T16:05:44Z
Problem mit Toggle-Button
<p>Hallo,</p>
<p>ich habe mir von dieser Seite <a href="https://proto.io/freebies/onoff/" rel="nofollow noopener noreferrer">On/Off FlipSwitch</a>
einen Toggle-Button erstellt:
CSS-Code</p>
<pre><code class="block language-css"><span class="token selector"><style>
<!-- Toogle-Button GEYSER ON/OFF -->
.onoffswitch</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span>
<span class="token property">-webkit-user-select</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">-moz-user-select</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch-checkbox</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch-label</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 2px solid #999999<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch-inner</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -100%<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> margin 0.3s ease-in 0s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch-inner:before, .onoffswitch-inner:after</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Trebuchet<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch-inner:before</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"GEYSER ON"</span><span class="token punctuation">;</span>
<span class="token property">padding-left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #0000FF<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #FFFFFF<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch-inner:after</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"GEYSER OFF"</span><span class="token punctuation">;</span>
<span class="token property">padding-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #FF0000<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #00FF00<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch-switch</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> #FFFFFF<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> 96px<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 2px solid #999999<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all 0.3s ease-in 0s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner</span> <span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch</span> <span class="token punctuation">{</span>
<span class="token property">right</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>
</code></pre>
<p>HTML-Code</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-switch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p>Nun möchte ich aber mit diesem Code einen zweiten Toggle-Button (mit anderem Text und Farben) darstellen.</p>
<p>Wie kann ich das erreichen ?</p>
<p>Wenn ich für den zeiten Toggle-Button anstatt "onoffswitch" "onoffswitch_L" verwende und folgenden HTML-Code verwende:</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch_L<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch_L<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch_L-checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch_L<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch_L-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch_L<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch_L-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch_L-switch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<p>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).</p>
<p>MfG</p>
<p>Juergen B.
⁉️</p>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736942#m1736942
Felix Riesterer
https://felix-riesterer.de
2018-11-22T16:22:12Z
2018-11-22T18:09:22Z
Problem mit Toggle-Button
<p>Lieber jbaben,</p>
<p>das <code>class</code>-Attribut gibt Dir die Möglichkeit, <em>alle</em> 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.</p>
<blockquote>
<pre><code class="block language-css"> <span class="token selector"><!-- Toogle-Button GEYSER ON/OFF -->
.onoffswitch</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span>
<span class="token property">-webkit-user-select</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">-moz-user-select</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p>Dein CSS-Code enthält ungültige Code-Teile. Ein HTML-Kommentar ist nur in HTML ein Kommentar, <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Syntax#Kommentare" rel="nofollow noopener noreferrer">in CSS notiert man Kommentare anders</a>.</p>
<p>Dein CSS-Code geht also von einem Element aus, das die Klasse <code>onoffswitch</code> hat. In Deinem HTML ist das ein <code><div></code>:</p>
<blockquote>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-switch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
</blockquote>
<p>Es handelt sich hier also um verschiedene Elemente, die alle unter dem Elternelement mit der Klasse <code>onoffswitch</code> versammelt sind. Ein Klonen sollte bereits einen zweiten Toggle-Button ergeben:</p>
<blockquote>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-switch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
</blockquote>
<pre><code class="block language-html"><span class="token comment"><!-- zweiter Toggle-Button mit anderem name-Attributwert: --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch2<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch2<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch-switch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<p>Warum scheitert das bei Dir? Oder scheitert es nicht und Du hast eigentlich ein anderes (visuelles?) Problem?</p>
<p>Was mir sonst noch so aufgefallen ist, sind die vielen Klassen-Namen, die eigentlich die Sache nur verkomplizieren:</p>
<ul>
<li>class="onoffswitch"</li>
<li>class="onoffswitch-checkbox"</li>
<li>class="onoffswitch-label"</li>
<li>class="onoffswitch-inner"</li>
<li>class="onoffswitch-switch"</li>
</ul>
<p>Genau genommen genügt die Klasse <code>onoffswitch</code> für alles. Man kann in CSS nämlich mittels des <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachfahrenselektor" rel="nofollow noopener noreferrer">Nachfahren-Selektors</a> ebenso auf <code>onoffswitch-checkbox</code> oder <code>onoffswitch-label</code> einwirken. Die beiden <code><span></code> innerhalb von <code><label></code> kann man mit <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/nth-of-type" rel="nofollow noopener noreferrer">nth-of-type()</a> 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:</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- zweiter Toggle-Button mit anderem name-Attributwert: --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onoffswitch2<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch2<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myonoffswitch2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<p>Und nun das verbesserte CSS:</p>
<pre><code class="block language-css"><span class="token comment">/* Toogle-Button GEYSER ON/OFF */</span>
<span class="token comment">/* Das Elternelement, das den Button realisiert */</span>
<span class="token selector">.onoffswitch</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span>
<span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">-moz-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* das <input> Element */</span>
<span class="token selector">.onoffswitch input</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* das <label> Element */</span>
<span class="token selector">.onoffswitch label</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 2px solid #999999<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* das erste <span> Element */</span>
<span class="token selector">.onoffswitch span:nth-of-type(1)</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 200%<span class="token punctuation">;</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> -100%<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> margin 0.3s ease-in 0s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch span:nth-of-type(1):before,
.onoffswitch span:nth-of-type(1):after</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> Trebuchet<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch span:nth-of-type(1):before</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"GEYSER ON"</span><span class="token punctuation">;</span>
<span class="token property">padding-left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #0000FF<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #FFFFFF<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch span:nth-of-type(1):after</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"GEYSER OFF"</span><span class="token punctuation">;</span>
<span class="token property">padding-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #FF0000<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #00FF00<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* das zweite <span> Element */</span>
<span class="token selector">.onoffswitch span:nth-of-type(2)</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> #FFFFFF<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> 96px<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 2px solid #999999<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all 0.3s ease-in 0s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch input:checked + label span:nth-of-type(1)</span> <span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.onoffswitch input:checked + label span:nth-of-type(2)</span> <span class="token punctuation">{</span>
<span class="token property">right</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Damit sollte es besser klappen. <a href="http://jsfiddle.net/wkqc8py2/1/" rel="noopener noreferrer">[Beweis]</a></p>
<p>Liebe Grüße,</p>
<p>Felix Riesterer.</p>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736944#m1736944
Gunnar Bittersmann
selfhtml@bittersmann.de
https://bittersmann.de
2018-11-22T16:37:56Z
2018-11-22T16:37:56Z
Problem mit Toggle-Button
<p>@@jbaben</p>
<blockquote>
<p>ich habe mir von dieser Seite <a href="https://proto.io/freebies/onoff/" rel="nofollow noopener noreferrer">On/Off FlipSwitch</a>
einen Toggle-Button erstellt:</p>
</blockquote>
<p>Welcher nicht funktioniert. Nicht mit Tastatursteuerung. Die Macher haben folgenden schwerwiegenden Fehler gemacht:<br>
<code class="language-css bad"><span class="token selector">.onoffswitch-checkbox</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></p>
<p>Interaktive Elemente dürfen – wenn sie denn funktionieren sollen – niemals mit <code>display: none</code> oder <code>visibility: hidden</code> versteckt, sondern nur <a href="https://a11yproject.com/posts/how-to-hide-content/" rel="nofollow noopener noreferrer">visuell versteckt</a> werden.</p>
<p>Wenn du stattdessen</p>
<pre><code class="block language-css"><span class="token selector">.onoffswitch-checkbox</span>
<span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>angibst, sollte das Ding auch per Tastatur bedienbar sein.</p>
<p>Es ist aber immer noch kein Button. Screenreader lesen eine Checkbox vor.</p>
<p>Ich empfehle die Lektüre von Heydons Artikel zu <a href="https://inclusive-components.design/toggle-button/" rel="noopener noreferrer">Toggle-Buttons</a>. Darin zeigt er auch, wie das mit <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span></code> geht.</p>
<blockquote>
<p>Wenn ich für den zeiten Toggle-Button anstatt "onoffswitch" "onoffswitch_L" verwende und folgenden HTML-Code verwende:</p>
</blockquote>
<p><a href="https://forum.selfhtml.org/self/2015/jan/14/jquery-footer-ie-fehler/1629597#m1629597" rel="noopener noreferrer">Online-Beispiel, bitte.</a></p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736945#m1736945
Gunnar Bittersmann
selfhtml@bittersmann.de
https://bittersmann.de
2018-11-22T16:43:25Z
2018-11-22T16:43:25Z
Problem mit Toggle-Button
<p>@@Felix Riesterer</p>
<blockquote>
<pre><code class="block bad language-css"><span class="token comment">/* das <input> Element */</span>
<span class="token selector">.onoffswitch input</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Damit sollte es besser klappen.</p>
</blockquote>
<p>Du solltest es inzwischen besser wissen. Damit klappt es nicht.</p>
<blockquote>
<p><a href="http://jsfiddle.net/wkqc8py2/" rel="noopener noreferrer">[Beweis]</a></p>
</blockquote>
<p>Aber getestet hast du das nicht?</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1737007#m1737007
Gunnar Bittersmann
selfhtml@bittersmann.de
https://bittersmann.de
2018-11-23T23:09:00Z
2018-11-23T23:09:41Z
Problem mit Toggle-Button
<p>@@Felix Riesterer</p>
<blockquote>
<blockquote>
<pre><code class="block language-css"> <!-- Toogle-Button GEYSER ON/OFF -->
</code></pre>
</blockquote>
<p>Dein CSS-Code enthält ungültige Code-Teile.</p>
</blockquote>
<p>Wobei allerdings weder <code><!--</code> (CDO) noch <code>--></code> (CDC) ungültig ist, sondern das dazwischen. [<a href="https://www.w3.org/TR/CSS22/grammar.html" rel="nofollow noopener noreferrer">Grammar of CSS 2.2</a>]</p>
<p><code class="language-css"><span class="token selector"><!-- html</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token punctuation">}</span> --></code> ist valides CSS und …</p>
<blockquote>
<p>Ein HTML-Kommentar ist nur in HTML ein Kommentar</p>
</blockquote>
<p>… du sagst es: es ist in CSS kein Kommentar, sondern <a href="https://codepen.io/gunnarbittersmann/pen/gQzgzP" rel="noopener noreferrer">wirkt</a>, wie Sie sehen, sehen Sie nichts.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736949#m1736949
Felix Riesterer
https://felix-riesterer.de
2018-11-22T16:51:09Z
2018-11-22T16:51:09Z
Problem mit Toggle-Button
<p>Lieber Gunnar,</p>
<blockquote>
<pre><code class="block language-css"><span class="token selector">.onoffswitch-checkbox</span>
<span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p>habe Deine Anmerkung im Online-Beispiel umgesetzt: <a href="http://jsfiddle.net/wkqc8py2/1/" rel="noopener noreferrer">[Beweis]</a></p>
<blockquote>
<p><a href="https://forum.selfhtml.org/self/2015/jan/14/jquery-footer-ie-fehler/1629597#m1629597" rel="noopener noreferrer">Online-Beispiel, bitte.</a></p>
</blockquote>
<p>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... :-)</p>
<p>Liebe Grüße,</p>
<p>Felix Riesterer.</p>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736947#m1736947
Felix Riesterer
https://felix-riesterer.de
2018-11-22T16:46:06Z
2018-11-22T16:46:06Z
Problem mit Toggle-Button
<p>Lieber Gunnar,</p>
<blockquote>
<blockquote>
<p>display: none;</p>
</blockquote>
<p>Du solltest es inzwischen besser wissen. Damit klappt es nicht.</p>
</blockquote>
<p>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. :-/</p>
<blockquote>
<blockquote>
<p><a href="http://jsfiddle.net/wkqc8py2/" rel="noopener noreferrer">[Beweis]</a></p>
</blockquote>
<p>Aber getestet hast du das nicht?</p>
</blockquote>
<p>Zugegeben nur flüchtig in einem Desktop-FF.</p>
<p>Liebe Grüße,</p>
<p>Felix Riesterer.</p>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736951#m1736951
Gunnar Bittersmann
selfhtml@bittersmann.de
https://bittersmann.de
2018-11-22T16:53:28Z
2018-11-22T16:53:28Z
Problem mit Toggle-Button
<p>@@Felix Riesterer</p>
<blockquote>
<p>Du weißt, wie dieses Detail besser zu lösen ist. Bitte schreib' es doch das nächste Mal gleich dazu.</p>
</blockquote>
<p>Hatte ich doch (im anderen Posting).</p>
<blockquote>
<blockquote>
<p>Aber getestet hast du das nicht?</p>
</blockquote>
<p>Zugegeben nur flüchtig in einem Desktop-FF.</p>
</blockquote>
<p>Desktop ist doch prädestiniert dafür, auch mit Tastatur zu testen.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736957#m1736957
Gunnar Bittersmann
selfhtml@bittersmann.de
https://bittersmann.de
2018-11-22T17:11:34Z
2018-11-22T17:11:34Z
Problem mit Toggle-Button
<p>@@Felix Riesterer</p>
<blockquote>
<p>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?</p>
</blockquote>
<p>Muss ich dir schon das zweite Mal für heute recht geben? WTF?</p>
<p>Ich könnte mal in einem Blogartikel erläutern, warum ein Online-Beispiel besser ist als seinen Code ins Forum zu kippen. Obwohl – <em>dafür</em> ist vermutlich sogar das Wiki der bessere Platz.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736952#m1736952
Felix Riesterer
https://felix-riesterer.de
2018-11-22T16:56:47Z
2018-11-22T16:56:47Z
Problem mit Toggle-Button
<p>Lieber Gunnar,</p>
<blockquote>
<p>Hatte ich doch (im anderen Posting).</p>
</blockquote>
<p>das habe ich erst gesehen, als ich meine Antwort abgeschickt hatte. Du hast natürlich recht.</p>
<blockquote>
<p>Desktop ist doch prädestiniert dafür, auch mit Tastatur zu testen.</p>
</blockquote>
<p>Wieso? Wenn es mit der Maus doch klappt... ;-)</p>
<p>Liebe Grüße,</p>
<p>Felix Riesterer.</p>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736953#m1736953
Rolf B
2018-11-22T16:57:37Z
2018-11-22T16:57:37Z
Problem mit Toggle-Button
<p>Ich leg schon mal das Popcorn raus...</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736955#m1736955
Gunnar Bittersmann
selfhtml@bittersmann.de
https://bittersmann.de
2018-11-22T17:00:47Z
2018-11-22T17:00:47Z
Problem mit Toggle-Button
<p>@@Rolf B</p>
<blockquote>
<p>Ich leg schon mal das Popcorn raus...</p>
</blockquote>
<p>Ich glaube, hier halten Felix und ich mal zusammen und enttäuschen dich. </p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1736959#m1736959
Felix Riesterer
https://felix-riesterer.de
2018-11-22T18:07:31Z
2018-11-22T18:08:33Z
Problem mit Toggle-Button
<p>Lieber Gunnar,</p>
<blockquote>
<p>Obwohl – <em>dafür</em> ist vermutlich sogar das Wiki der bessere Platz.</p>
</blockquote>
<p>Nein! Doch! Oh! ;-P <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a>: Wo war doch gleich Dein Popcorn?</p>
<p>Liebe Grüße,</p>
<p>Felix Riesterer.</p>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1739565#m1739565
Matthias Scharwies
mscharwies@selfhtml.org
2018-12-29T09:17:57Z
2018-12-29T09:17:57Z
Problem mit Toggle-Button
<p>Servus!</p>
<blockquote>
<blockquote>
<p>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?</p>
</blockquote>
<p>Muss ich dir schon das zweite Mal für heute recht geben? WTF?</p>
<p>Ich könnte mal in einem Blogartikel erläutern, warum ein Online-Beispiel besser ist als seinen Code ins Forum zu kippen. Obwohl – <em>dafür</em> ist vermutlich sogar das Wiki der bessere Platz.</p>
</blockquote>
<p>@@Gunnar Bittersmann @@Felix Riesterer</p>
<p>Matthias Apsel und ich haben mal so einen Artikel angelegt:</p>
<ul>
<li><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/online-Beispiele" rel="nofollow noopener noreferrer">SELFHTML:Forum/online-Beispiele</a> (Warum <strong>online-Beispiele</strong> besser als das Posten von Code sind)</li>
</ul>
<p>Wollt ihr ihn weiter verbessern?</p>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<div class="signature">-- <br>
<em>"I don’t make typos. I make new words."</em>
</div>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1737098#m1737098
jbaben
2018-11-25T14:46:48Z
2018-11-25T14:46:48Z
Problem mit Toggle-Button
<p>Hallo Felix Riesterer,</p>
<p>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 ?</p>
<p>Bei meinem CSS-Code (automatisch erstellt) war das Problem mit dem falschen Kommentar Tag.
Mit dem richtigen Kommentar-Tag funktioniert auch mein Code.</p>
<p>Mein Code gefällt mir aber jetzt nicht mehr und ich werde Deinen Code verwenden.</p>
<p>Das mit dem Online-Beispiel muss ich noch ausprobieren.</p>
<p>MfG</p>
<p>Juergen B.</p>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1737112#m1737112
Felix Riesterer
https://felix-riesterer.de
2018-11-25T16:45:06Z
2018-11-25T16:45:06Z
Problem mit Toggle-Button
<p>Lieber jbaben,</p>
<blockquote>
<p>der zweite Toggle-Button soll den Text "LIGHT ON/LIGHT OFF" erhalten.
Kannst Du mir das bitte noch ändern ?</p>
</blockquote>
<p>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.</p>
<p>Ich habe das Fiddle <a href="http://jsfiddle.net/wkqc8py2/4/" rel="noopener noreferrer">stark überarbeitet</a>, 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.</p>
<p>Liebe Grüße,</p>
<p>Felix Riesterer.</p>
https://forum.selfhtml.org/self/2018/nov/22/problem-mit-toggle-button/1737151#m1737151
jbaben
2018-11-26T16:41:25Z
2018-11-26T16:41:25Z
Problem mit Toggle-Button
<p>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).</p>
<p>MfG</p>
<p>Juergen B.</p>