borisbaer: jQuery add/removeClass: Geht das auch einfacher?

problematische Seite

Hallo 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

  1. problematische Seite

    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.

    1. problematische Seite

      Lieber borisbaer,

      warum genügt es nicht dem <body> (oder von mir aus auch gleich dem <html>) die Klasse map-fullscreen zu toggeln, und der Rest reagiert über Nachfahrenselektoren im CSS?

      Liebe Grüße

      Felix Riesterer

      1. problematische Seite

        @@Felix Riesterer

        warum genügt es nicht dem <body> (oder von mir aus auch gleich dem <html>) die Klasse map-fullscreen zu 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)
        1. problematische Seite

          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

          1. problematische Seite

            Hallo,

            Notstandsgeseze,

            hat das was mit gzsz zu tun?

            Gruß
            Kalk

            1. problematische Seite

              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

      2. problematische Seite

        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!

        1. problematische Seite

          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.
          1. problematische Seite

            Wow, dass es so rum geht, wusste ich gar nicht! Wieder etwas gelernt, vielen Dank! Das macht das Ganze natürlich deutlich einfacher! 😀

            1. problematische Seite

              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
              1. problematische Seite

                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! 🐵

        2. problematische Seite

          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 !important hat @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 body mit 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-active geben, und zwar dem Element, in dem alle die Elemente stecken, die wir visuell verändern wollen. In meinen Beispielen ist das das body-Element.

          Liebe Grüße

          Felix Riesterer

          1. problematische Seite

            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

  2. problematische Seite

    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
    1. problematische Seite

      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

    2. problematische Seite

      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!

      1. problematische Seite

        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
        1. problematische Seite

          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

        2. problematische Seite

          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.

          1. problematische Seite

            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
            1. problematische Seite

              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! 😜