tag:forum.selfhtml.org,2005:/selfjQuery add/removeClass: Geht das auch einfacher? – SELFHTML-Forum2020-03-27T13:05:38Zhttps://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767681#m1767681borisbaer2020-03-23T22:10:08Z2020-03-23T22:10:08ZjQuery add/removeClass: Geht das auch einfacher?<p>Hallo zusammen,</p>
<p>ich arbeite hier an einer interaktiven Karte, bei der ich mit meinen (sehr bescheidenen jQuery-Kenntnissen) Skalierungsmöglichkeiten und ab einem bestimmten Viewport eine Vollbild-Funktion implementiert habe.</p>
<p>Für den Vollbild-Modus habe ich folgendes Script verwendet:</p>
<pre><code>$("body").on("click", ".enter-fullscreen", function(){
$('#map-fullscreen button').removeClass('enter-fullscreen');
$('#map-fullscreen button').addClass('exit-fullscreen');
$("body").css({"margin": "0"});
$("header").css({"display": "none"});
$("footer").css({"display": "none"});
$("main").css({"margin": "0"});
$("h1").css({"display": "none"});
$("#map-container").css({"margin": "0", "padding": "0"});
$("#abc").css({"height": "100vh"});
});
$("body").on("click", ".exit-fullscreen", function(){
$('#map-fullscreen button').removeClass('exit-fullscreen');
$('#map-fullscreen button').addClass('enter-fullscreen');
$("body").css({"margin": "0 0 10px 0"});
$("header").css({"display": "block"});
$("footer").css({"display": "block"});
$("main").css({"margin": "20px auto 116px auto"});
$("h1").css({"display": "block"});
$("#map-container").css({"margin": "10px 0", "padding": "10px"});
$("#abc").css({"height": "59.5vh"});
});
</code></pre>
<p>Ich habe mich nun gefragt, ob man diese Vollbild-Funktion so umsetzen sollte bzw. ob das auch einfacher geht.</p>
<p>Für die Skalierungsmöglichkeiten habe ich ein ähnliches Script verwendet:</p>
<pre><code>$('#btn-scale-1').click(function(){
$('#map').removeClass();
$('#map-wrapper').removeClass();
$('#map-scaling button').removeClass();
$('#map').addClass('scale-1');
$('#map-wrapper').addClass('scale-1');
$('#btn-scale-1').addClass('selected');
$('.MT-container').removeClass('larger-scale');
$('.MT-container a').removeClass('larger-scale');
$('.MT-container .divider').removeClass('larger-scale');
$('.MT-container .tag').removeClass('larger-scale');
});
</code></pre>
<p>Für jede Skalierungsstufe erfolgt ein solches Skript.</p>
<p>Es werden folglich hauptsächlich viele classes ausgetauscht. Es funktioniert zwar, doch ich wollte eure Meinung zu dem Ganzen hören.</p>
<p>Vielen Dank für eure Zeit!</p>
<p>Boris</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767682#m1767682borisbaer2020-03-23T23:29:39Z2020-03-23T23:29:39ZjQuery add/removeClass: Geht das auch einfacher?<p>Da ich leider nicht mehr meinen Beitrag editieren kann, hier ein Nachtrag:</p>
<p>Das Vollbild-Script habe ich nun optimiert:</p>
<pre><code class="block">$('#map-fullscreen button').click(function(){
$('#map-fullscreen').toggleClass('map-fullscreen');
$('#map-fullscreen button').toggleClass('map-fullscreen');
$('body').toggleClass('map-fullscreen');
$('header').toggleClass('map-fullscreen');
$('footer').toggleClass('map-fullscreen');
$('main').toggleClass('map-fullscreen');
$('h1').toggleClass('map-fullscreen');
$('#map-container').toggleClass('map-fullscreen');
$('#abc').toggleClass('map-fullscreen');
});
</code></pre>
<p>Es schaltet jetzt einfach zwischen den Klassen hin und her.</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767715#m1767715Rolf B2020-03-24T23:11:38Z2020-03-24T23:12:37ZjQuery add/removeClass: Geht das auch einfacher?<p>Hallo borisbaer,</p>
<p>mal ganz dumm gefragt: Wo ist der Sinn, den Vollbildmodus nur dann anzubieten, wenn die Bildschirmbreite <strong>weniger</strong> als 1280 Pixel ist? Möchte jemand mit einem Full-HD Monitor keinen Vollbildmodus? Ergibt ein optionaler Vollbildmodus nicht immer Sinn?</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767683#m1767683Felix Riestererhttps://felix-riesterer.de2020-03-24T00:09:10Z2020-03-24T00:09:10ZjQuery add/removeClass: Geht das auch einfacher?<p>Lieber borisbaer,</p>
<p>warum genügt es nicht dem <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span></code> (oder von mir aus auch gleich dem <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span></code>) die Klasse <code>map-fullscreen</code> zu toggeln, und der Rest reagiert über <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachfahrenkombinator" rel="nofollow noopener noreferrer">Nachfahrenselektoren</a> im CSS?</p>
<p>Liebe Grüße</p>
<p>Felix Riesterer</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767684#m1767684Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-03-24T03:49:21Z2020-03-24T12:11:13ZjQuery add/removeClass: Geht das auch einfacher?<p>@@Felix Riesterer</p>
<blockquote>
<p>warum genügt es nicht dem <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span></code> (oder von mir aus auch gleich dem <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span></code>) die Klasse <code>map-fullscreen</code> zu toggeln, und der Rest reagiert über <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachfahrenkombinator" rel="nofollow noopener noreferrer">Nachfahrenselektoren</a> im CSS?</p>
</blockquote>
<p>Ja, es genügt.</p>
<p>Warum stellst du eine Suggestivfrage? </p>
<p>Warum jQuery?</p>
<pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#map-fullscreen button'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toggleClass</span><span class="token punctuation">(</span><span class="token string">'map-fullscreen'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>sieht in Vanilla-JavaScript genauso einfach aus:</p>
<pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#map-fullscreen button'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'map-fullscreen'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis:
Lehrer ist wohl doch ein regelrechter Beruf! (<a href="https://twitter.com/heuteshow/status/1241117074191273997" rel="nofollow noopener noreferrer">@heuteshow</a>)
</div>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767711#m1767711borisbaer2020-03-24T20:20:00Z2020-03-24T20:20:00ZjQuery add/removeClass: Geht das auch einfacher?<p>Tut mir leid, dass ich da so doof nachfragen muss, aber wie genau funktioniert das?</p>
<p>Ich habe im CSS folgende Klassen, die aktiviert werden sollen:</p>
<pre><code class="block">body.fullscreen-active { margin: 0 !important; }
header.fullscreen-active { display: none !important; }
footer.fullscreen-active { display: none !important; }
main.fullscreen-active { margin: 0 !important; }
h1.fullscreen-active { display: none !important; }
#map-fullscreen.fullscreen-active { margin: 0 !important; }
#map-fullscreen button.fullscreen-active { background-image: url("/images/main/fullscreen-exit.png") !important; }
#map-container-1.fullscreen-active { width: 100vw !important; margin: 0 !important; padding: 0 !important; }
#map-container-2.fullscreen-active { width: 100vw !important; height: 100vh !important; }
</code></pre>
<p>Vielen Dank schon mal!</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767698#m1767698Felix Riestererhttps://felix-riesterer.de2020-03-24T12:07:14Z2020-03-24T12:07:14ZjQuery add/removeClass: Geht das auch einfacher?<p>Lieber Gunnar,</p>
<blockquote>
<p>Warum stellst du eine Suggestivfrage? </p>
</blockquote>
<p>Lehrerkrankheit.</p>
<blockquote>
<p> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
</blockquote>
<p>Da fehlt mir noch <em>stay vigilant</em>. Notstandsgeseze, Corona-Verdächtige via Handyortung - wissenschon.</p>
<p>Liebe Grüße</p>
<p>Felix Riesterer</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767701#m1767701Tabellenkalk2020-03-24T13:00:48Z2020-03-24T13:00:48ZjQuery add/removeClass: Geht das auch einfacher?<p>Hallo,</p>
<blockquote>
<p>Notstands<strong>g</strong>e<strong>s</strong>e<strong>z</strong>e,</p>
</blockquote>
<p>hat das was mit gzsz zu tun?</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767704#m1767704Felix Riestererhttps://felix-riesterer.de2020-03-24T15:40:02Z2020-03-24T15:40:02ZjQuery add/removeClass: Geht das auch einfacher?<p>Lieber Tabellenkalk,</p>
<blockquote>
<blockquote>
<p>Notstands<strong>g</strong>e<strong>s</strong>e<strong>z</strong>e,</p>
</blockquote>
</blockquote>
<p>hehe, heute darf ich auch mal einen Tippfehler machen. Ich kaufe ein t.</p>
<blockquote>
<p>hat das was mit gzsz zu tun?</p>
</blockquote>
<p>Das erklären Dir die Leute bei der <a href="https://freiheitsrechte.org/corona-und-grundrechte/" rel="nofollow noopener noreferrer">Gesellschaft für Freiheitsrechte</a> viel besser als ich.</p>
<p>Liebe Grüße</p>
<p>Felix Riesterer</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767713#m1767713Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-03-24T20:30:38Z2020-03-24T20:30:38ZjQuery add/removeClass: Geht das auch einfacher?<p>Hallo borisbaer,</p>
<blockquote>
<p>Tut mir leid, dass ich da so doof nachfragen muss, aber wie genau funktioniert das?</p>
</blockquote>
<p>Was sollen denn die ganzen important?</p>
<blockquote>
<p>Ich habe im CSS folgende Klassen, die aktiviert werden sollen:</p>
<pre><code class="block language-css"><span class="token selector">body.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">header.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
...
</code></pre>
</blockquote>
<pre><code class="block language-css"><span class="token selector">body.fullscreen-active</span> <span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.fullscreen-active header</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>Dann brauchst du nur noch die Klasse für den body neu zu setzen bzw. zu entfernen.</p>
<p>Falls das nicht wie erwartet funktioniert: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen</a></p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767714#m1767714Felix Riestererhttps://felix-riesterer.de2020-03-24T23:01:10Z2020-03-24T23:01:10ZjQuery add/removeClass: Geht das auch einfacher?<p>Lieber borisbaer,</p>
<blockquote>
<p>Tut mir leid, dass ich da so doof nachfragen muss, aber wie genau funktioniert das?</p>
</blockquote>
<p>lass uns mal Deine Selektoren anschauen:</p>
<blockquote>
<pre><code class="block language-css"><span class="token selector">body.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">header.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">footer.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">main.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">h1.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p>Über die Verwendung von <code>!important</code> hat <a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a> ja schon etwas gesagt. Diese Selektoren funktionieren alle gleich: Sie beschreiben einen Element-Namen (<code>body</code>, <code>header</code>, usw.), gefolgt von einem Klassennamen, der diesen Elementen vergeben wurde. Wir wollen jetzt aber sagen, dass sie einen Vorfahren benötigen, der eine Klasse hat:</p>
<pre><code class="block language-css"><span class="token selector">body.fullscreen-active header</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span>
</code></pre>
<p>Hier beschreiben wir mit dem Leerzeichen, dass ein Element ein Nachfahre dessen ist, was vor dem Leerzeichen steht. Also ein beliebig tief verschachteltes <code>header</code>-Element, das entweder direkt selbst im <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span></code> steckt, oder irgendwo drin steckt, was dann selbst ein Kind von <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span></code> ist.</p>
<blockquote>
<pre><code class="block language-css"><span class="token selector">#map-fullscreen.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">#map-fullscreen button.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"/images/main/fullscreen-exit.png"</span><span class="token punctuation">)</span></span> <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">#map-container-1.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100vw <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">#map-container-2.fullscreen-active</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100vw <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100vh <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p>Na siehste! Du verwendest ja selbst schon Nachfahren-Selektoren! Der Selektor <code class="language-css"><span class="token selector">#map-fullscreen button.fullscreen-active</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></code> ist ein solcher!</p>
<p>Aber was wir wollen, ist den Bezug zu einem übergeordneten <code>body</code> mit einer bestimmten Klasse herzustellen:</p>
<pre><code class="block language-css"><span class="token selector">body.fullscreen-active #map-fullscreen</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span>
<span class="token selector">body.fullscreen-active #map-fullscreen button</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span>
<span class="token selector">body.fullscreen-active #map-container-1</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span>
<span class="token selector">body.fullscreen-active #map-container-2</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span>
</code></pre>
<p>Das bedeutet, dass wir nur noch einem Element die Klasse <code>fullscreen-active</code> geben, und zwar dem Element, in dem alle die Elemente stecken, die wir visuell verändern wollen. In meinen Beispielen ist das das <code>body</code>-Element.</p>
<p>Liebe Grüße</p>
<p>Felix Riesterer</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767730#m1767730borisbaer2020-03-25T15:29:57Z2020-03-25T15:29:57ZjQuery add/removeClass: Geht das auch einfacher?<p>Wow, dass es so rum geht, wusste ich gar nicht! Wieder etwas gelernt, vielen Dank! Das macht das Ganze natürlich deutlich einfacher! </p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767743#m1767743borisbaer2020-03-25T19:42:44Z2020-03-25T19:42:44ZjQuery add/removeClass: Geht das auch einfacher?<p>Hallo Felix,</p>
<p>vielen Dank für die Erklärung! Klar, das mit den Nachfahren kannte ich schon, mir war nur nicht bewusst, dass das Ganze auch so funktionieren kann wie Matthias es oben dargestellt hat! </p>
<p>Boris</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767742#m1767742borisbaer2020-03-25T19:40:01Z2020-03-25T19:40:01ZjQuery add/removeClass: Geht das auch einfacher?<p>Hallo Rolf,</p>
<p>stimmt, ein Vollbild-Modus ist eigentlich für jeden Viewport gut! Ich werde es so einstellen, dass der Vollbild-Modus immer möglich ist. Danke für den Gedanken! Diese 1280px-viewport-Breite ist jetzt nur zum Testen, da ist noch nichts in Stein gemeißelt. Ich hatte das Ganze bloß mal auf dem Smartphone getestet und gemerkt, dass die Karte ganz schön unpraktisch ist auf einem kleinen Bildschirm. Deswegen kam mir auch zuerst in den Sinn, den Vollbild-Modus vor allem für einen kleineren viewport zu aktivieren.</p>
<p>Boris</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767777#m1767777borisbaer2020-03-26T13:10:41Z2020-03-26T13:12:35ZjQuery add/removeClass: Geht das auch einfacher?<p>Der Vollbild-Modus funktioniert nun für alle viewports! :)</p>
<p>Wobei er für größere Bildschirme aus Designgründen eher ein 95%-Vollbild-Modus ist.</p>
<p>Danke noch mal für den Tipp!</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767731#m1767731Rolf B2020-03-25T15:43:39Z2020-03-25T15:45:43ZjQuery add/removeClass: Geht das auch einfacher?<p>Hallo borisbaer,</p>
<p>du bist noch auf einen Punkt nicht eingegangen.</p>
<blockquote>
<p>Was sollen denn die ganzen important?</p>
</blockquote>
<p>Weil - "!important" ist die Atombombe der CSS-Prioritätskriegsführung. CSS Regeln haben eine Priorität, gemäß der sie angewendet werden. Ein Teil dieser Prioritätsfindung ist die Spezifizität (oder specificity). Wenn man diese Prioritäten kennt und beachtet, ist !important meistens nicht nötig. Vor allem, wenn man mit CSS Regeln styled und auf style-Attribute verzichtet.</p>
<p>Es gibt ein nettes Bild, das die Spezifizität mit Fischen visualisiert: <a href="https://specifishity.com/" rel="nofollow noopener noreferrer">https://specifishity.com/</a></p>
<p>Unser Wiki hat dazu einen Text unter der Überschrift <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade" rel="nofollow noopener noreferrer">Kaskade</a> (es heißt ja Cascading Style Sheets).</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767744#m1767744borisbaer2020-03-25T19:49:05Z2020-03-25T19:49:48ZjQuery add/removeClass: Geht das auch einfacher?<p>Klasse Bild, sehr anschaulich! Die sind schon wieder raus, das war lediglich zum Testen da. Ich schaue auch, dass ich am Ende keine unnötigen !important-Setzungen habe. Nur bei bestimmten Plugins musste ich sie manchmal stehen lassen. Sorry, dass ich nicht immer auf alles eingehe. Mit meinem kleinen Sohn muss ich mir meine Zeit immer gut einteilen. Ich nehme aber alles zur Kenntnis und bin auch sehr dankbar für jeden Beitrag! </p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767779#m1767779Rolf B2020-03-26T13:16:37Z2020-03-26T13:16:37ZjQuery add/removeClass: Geht das auch einfacher?<p>Hallo borisbaer,</p>
<p>sehr schön :)</p>
<p>Auf meinem PC ist der Unfullscreen-Button allerdings halb außerhalb des Bildschirms. Bug oder Feature?</p>
<p><a href="/images/f9e3e898-6f63-11ea-9635-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/f9e3e898-6f63-11ea-9635-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767813#m1767813MudGuardhttp://www.andreas-waechter.de/2020-03-27T10:58:14Z2020-03-27T10:58:14ZjQuery add/removeClass: Geht das auch einfacher?<p>Hi,</p>
<blockquote>
<p>Auf meinem PC ist der Unfullscreen-Button allerdings halb außerhalb des Bildschirms. Bug oder Feature?</p>
</blockquote>
<p>Bei Unfull ist das wohl ein Unfall </p>
<p>cu,<br>
Andreas a/k/a MudGuard</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767825#m1767825borisbaer2020-03-27T12:42:20Z2020-03-27T12:42:20ZjQuery add/removeClass: Geht das auch einfacher?<p>Hallo Rolf,</p>
<p>sehr seltsam. Darf ich fragen, welchen Browser du benutzt? Bei mir sieht das Ganze so aus:</p>
<p><a href="/images/4dad40d6-7028-11ea-8932-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/4dad40d6-7028-11ea-8932-b42e9947ef30.jpg?size=medium" alt="" title="Screenshot" loading="lazy"></a></p>
<p>Zumindest die overscroll-Leiste ist nun weg.</p>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767826#m1767826Rolf B2020-03-27T12:50:45Z2020-03-27T12:50:45ZjQuery add/removeClass: Geht das auch einfacher?<p>Hallo borisbaer,</p>
<p>Chrome.</p>
<p>Aber mach mal dein Browserfenster schmaler und guck Dir dann den Fullscreen (oder eher Fullwindow?) Modus an.</p>
<p>Es ist aber jetzt besser, der Button ist nicht mehr halb verschwunden.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2020/mar/23/jquery-add-removeclass-geht-das-auch-einfacher/1767828#m1767828borisbaer2020-03-27T13:05:38Z2020-03-27T13:06:13ZjQuery add/removeClass: Geht das auch einfacher?<p>Ah, ich weiß, wo das Problem liegt. Ich habe für die Karte overscroll ab einem viewport von 1280px abwärts aktiviert, denn auf touch devices funktioniert das Scrollen sonst nicht. Ich muss dann wohl per script erkennen lassen, ob es sich um ein touch device handelt und nur in dem Fall overscroll aktiveren. Was denkst du darüber? Vielen Dank für den Hinweis übrigens!</p>
<p>Immer diese Eventualitäten, die zu berücksichtigen sind! </p>