jQuery add/removeClass: Geht das auch einfacher?
borisbaer
jQuery add/removeClass: Geht das auch einfacher?
borisbaer
Gunnar Bittersmann
Tabellenkalk
Rolf B
MudGuardHallo zusammen,
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.
Für den Vollbild-Modus habe ich folgendes Script verwendet:
$("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"});
});
Ich habe mich nun gefragt, ob man diese Vollbild-Funktion so umsetzen sollte bzw. ob das auch einfacher geht.
Für die Skalierungsmöglichkeiten habe ich ein ähnliches Script verwendet:
$('#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');
});
Für jede Skalierungsstufe erfolgt ein solches Skript.
Es werden folglich hauptsächlich viele classes ausgetauscht. Es funktioniert zwar, doch ich wollte eure Meinung zu dem Ganzen hören.
Vielen Dank für eure Zeit!
Boris
akzeptierte Antworten
jQuery add/removeClass: Geht das auch einfacher?
Felix Riesterer
Bewertung: keine Bewertung
jQuery add/removeClass: Geht das auch einfacher?
Matthias Apsel
Bewertung: keine Bewertung
jQuery add/removeClass: Geht das auch einfacher?
Felix Riesterer
Bewertung: +1, 1 Stimme
-
Da ich leider nicht mehr meinen Beitrag editieren kann, hier ein Nachtrag:
Das Vollbild-Script habe ich nun optimiert:
$('#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'); });Es schaltet jetzt einfach zwischen den Klassen hin und her.
-
Lieber borisbaer,
warum genügt es nicht dem
<body>(oder von mir aus auch gleich dem<html>) die Klassemap-fullscreenzu toggeln, und der Rest reagiert über Nachfahrenselektoren im CSS?Liebe Grüße
Felix Riesterer
-
@@Felix Riesterer
warum genügt es nicht dem
<body>(oder von mir aus auch gleich dem<html>) die Klassemap-fullscreenzu toggeln, und der Rest reagiert über Nachfahrenselektoren im CSS?Ja, es genügt.
Warum stellst du eine Suggestivfrage? 😉
Warum jQuery?
$('#map-fullscreen button').click(function(){ $('body').toggleClass('map-fullscreen'); });sieht in Vanilla-JavaScript genauso einfach aus:
document.querySelector('#map-fullscreen button').addEventListener('click', function(){ document.body.classList.toggle('map-fullscreen'); });🖖 Stay hard! Stay hungry! Stay alive! Stay home!
--
Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! (@heuteshow)-
Lieber Gunnar,
Warum stellst du eine Suggestivfrage? 😉
Lehrerkrankheit.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Da fehlt mir noch stay vigilant. Notstandsgeseze, Corona-Verdächtige via Handyortung - wissenschon.
Liebe Grüße
Felix Riesterer
-
Hallo,
Notstandsgeseze,
hat das was mit gzsz zu tun?
Gruß
Kalk-
Lieber Tabellenkalk,
Notstandsgeseze,
hehe, heute darf ich auch mal einen Tippfehler machen. Ich kaufe ein t.
hat das was mit gzsz zu tun?
Das erklären Dir die Leute bei der Gesellschaft für Freiheitsrechte viel besser als ich.
Liebe Grüße
Felix Riesterer
-
-
-
-
Tut mir leid, dass ich da so doof nachfragen muss, aber wie genau funktioniert das?
Ich habe im CSS folgende Klassen, die aktiviert werden sollen:
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; }Vielen Dank schon mal!
-
Hallo borisbaer,
Tut mir leid, dass ich da so doof nachfragen muss, aber wie genau funktioniert das?
Was sollen denn die ganzen important?
Ich habe im CSS folgende Klassen, die aktiviert werden sollen:
body.fullscreen-active { margin: 0 !important; } header.fullscreen-active { display: none !important; } ...body.fullscreen-active { margin: 0; } .fullscreen-active header { display: none; } ...Dann brauchst du nur noch die Klasse für den body neu zu setzen bzw. zu entfernen.
Falls das nicht wie erwartet funktioniert: https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.-
Wow, dass es so rum geht, wusste ich gar nicht! Wieder etwas gelernt, vielen Dank! Das macht das Ganze natürlich deutlich einfacher! 😀
-
Hallo borisbaer,
du bist noch auf einen Punkt nicht eingegangen.
Was sollen denn die ganzen important?
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.
Es gibt ein nettes Bild, das die Spezifizität mit Fischen visualisiert: https://specifishity.com/
Unser Wiki hat dazu einen Text unter der Überschrift Kaskade (es heißt ja Cascading Style Sheets).
Rolf
--
sumpsi - posui - obstruxi-
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! 🐵
-
-
-
-
Lieber borisbaer,
Tut mir leid, dass ich da so doof nachfragen muss, aber wie genau funktioniert das?
lass uns mal Deine Selektoren anschauen:
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; }Über die Verwendung von
!importanthat @Matthias Apsel ja schon etwas gesagt. Diese Selektoren funktionieren alle gleich: Sie beschreiben einen Element-Namen (body,header, 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:body.fullscreen-active header { ... }Hier beschreiben wir mit dem Leerzeichen, dass ein Element ein Nachfahre dessen ist, was vor dem Leerzeichen steht. Also ein beliebig tief verschachteltes
header-Element, das entweder direkt selbst im<body>steckt, oder irgendwo drin steckt, was dann selbst ein Kind von<body>ist.#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; }Na siehste! Du verwendest ja selbst schon Nachfahren-Selektoren! Der Selektor
#map-fullscreen button.fullscreen-active {}ist ein solcher!Aber was wir wollen, ist den Bezug zu einem übergeordneten
bodymit einer bestimmten Klasse herzustellen:body.fullscreen-active #map-fullscreen {...} body.fullscreen-active #map-fullscreen button {...} body.fullscreen-active #map-container-1 {...} body.fullscreen-active #map-container-2 {...}Das bedeutet, dass wir nur noch einem Element die Klasse
fullscreen-activegeben, und zwar dem Element, in dem alle die Elemente stecken, die wir visuell verändern wollen. In meinen Beispielen ist das dasbody-Element.Liebe Grüße
Felix Riesterer
-
Hallo Felix,
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! 😀
Boris
-
-
-
-
-
Hallo borisbaer,
mal ganz dumm gefragt: Wo ist der Sinn, den Vollbildmodus nur dann anzubieten, wenn die Bildschirmbreite weniger als 1280 Pixel ist? Möchte jemand mit einem Full-HD Monitor keinen Vollbildmodus? Ergibt ein optionaler Vollbildmodus nicht immer Sinn?
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
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.
Boris
-
Der Vollbild-Modus funktioniert nun für alle viewports! :)
Wobei er für größere Bildschirme aus Designgründen eher ein 95%-Vollbild-Modus ist.
Danke noch mal für den Tipp!
-
Hallo borisbaer,
sehr schön :)
Auf meinem PC ist der Unfullscreen-Button allerdings halb außerhalb des Bildschirms. Bug oder Feature?
Rolf
--
sumpsi - posui - obstruxi-
Hi,
Auf meinem PC ist der Unfullscreen-Button allerdings halb außerhalb des Bildschirms. Bug oder Feature?
Bei Unfull ist das wohl ein Unfall 😉
cu,
Andreas a/k/a MudGuard -
Hallo Rolf,
sehr seltsam. Darf ich fragen, welchen Browser du benutzt? Bei mir sieht das Ganze so aus:
Zumindest die overscroll-Leiste ist nun weg.
-
Hallo borisbaer,
Chrome.
Aber mach mal dein Browserfenster schmaler und guck Dir dann den Fullscreen (oder eher Fullwindow?) Modus an.
Es ist aber jetzt besser, der Button ist nicht mehr halb verschwunden.
Rolf
--
sumpsi - posui - obstruxi-
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!
Immer diese Eventualitäten, die zu berücksichtigen sind! 😜
-
-
-
-
-
