.dropdownMenuContainer - Wo wird dieser erstellt?

  • Aloa werte Gemeinde,

    ich möchte dem dropdownMenuContainer meine eigene Klasse mitgeben.

    Jedoch nur "dem zweiten", also jener der für das Menü zuständig ist (Kontrollzentrum, Benachrichtigungen, Konversationen ...).

    Beispiel;

    <div class="dropdownMenuContainer meineEigeneKlasse">

    Ich finde nur leider nicht die Stelle an dem der Container erstellt wird, ich weis er wird erst dann erstellt, sobald der Nutzer auf ein Menüpunkt klickt (eben Kontrollzentrum, Benachrichtigungen ...)

    Kann mir da jemand auf die Schliche helfen?

  • Ah, auf die Idee hätte ich auch kommen können. Ganz vergessen dass das WSC auch bei Github zu finden ist :thumbup:

    Ich danke dir.

    Leider gilt das für alle (beide). Es gibt einmal den dropdownMenuContainer für die Suche (siehe Anhang) und einmal für das Usermenü.

    Wie kann ich nun darauf achten, nicht auch der Suche meine Klasse zuzuweisen?

    Das doofe ist auch das sich beide lediglich im body befinden. Ich kann also leider nicht danach gehen von wegen

    .userpanel .dropdownMenuContainer.

    Alexander Ebert ich bin am verzweifeln :(

    Im Grunde möchte ich erreichen dass das Dropdown des Userpanels mitscrollt. Das habe ich soweit geregelt. Klappt jedoch nur wenn der Container erstellt wurde. Klickt man nun also einen Link und die Seite ist bereits ein wenig gescrollt, kann ich die neue Fixierung nicht vergeben da die Klasse erst beim manuellen Scrollen hinzugefügt wird.

  • Danke. Daran habe ich auch bereits gedacht.

    Wie aber verhält es sich bei "dritt"-Dropdowns. Wenn also selbst eins angelegt wird, von jenem schnappt sich das Design ja nicht automatisch eine Klasse.

    Möglich wäre auch das ich per JS alle interactiveDropdown's Auslese. Da ist nur noch die Frage offen ob die Suche immer index 0 darstellt? Die Suche müsste ich nämlich überspringen.

    • Offizieller Beitrag

    Möglich wäre auch das ich per JS alle interactiveDropdown's Auslese. Da ist nur noch die Frage offen ob die Suche immer index 0 darstellt? Die Suche müsste ich nämlich überspringen.

    Die Suche ist gar kein interactiveDropdown, also reicht das hier vollkommen:

    CSS
    .interactiveDropdown {
        // yada yada yada
    }
  • Ah okay. Dennoch behebt das nicht das Problem das ich aktuell habe.

    Ich habe das Hauptmenü und das Userpanel getrennt. Im Grunde befindet sich das Userpanel jetzt unter dem .pageHeaderFacade. Scrolle ich jetzt runter und erreiche die Position an der das Userpanel eigentlich "überscrollt" wird, hänge ich es per JS an.

    So fixiere eben die beiden Dinge dann oben so dass sie mitscrollen.

    Lade ich aber die Seite neu (bspw.) und sie ist bereits ein wenig gescrollt. Sieht das ganze so aus.

    Screenshot

    Erst wenn ich jetzt manuell scrolle, triggert der JS-Code und weist dem Element die Klasse zu.

    Code
    gb_dropdown[1].classList.add("five_dropdownMenuContainer");

    Das Element wird ja erst beim anklicken erstellt. Das ist eben mein Übel das ich zurzeit habe.

    Gibt es sonst die Möglichkeit das irgendwie anders zu lösen? Gibt eine JavaScript Möglichkeit um zu erkennen, ob die Seite "vom Browser automatisch gescrollt" wurde? Dann könnte ich da ja eigentlich entsprechend einen Listener hinzufügen.


    //edit

    Ich könnte abfragen ob ein <li> bzw. <a> im userPanel geklickt wird. Aber leider hat das entsprechende <ul> keine ID sondern nur eine class........

    Einmal editiert, zuletzt von GangstaSunny (10. November 2019 um 21:11)

  • Die Funktion wird auch ausgelöst wenn der Browser von sich aus scrollt. Zumindest kann ich ein console.log("triggered"); hinzufügen (über die erste if) und es wird mir auch angezeigt in der Console.

    Nur der entsprechende dropdownMenuContainer existiert eben noch nicht. Er wird erst bei einen Klick auf einen der Menüpunkte erstellt.

    //edit

    Hier mal ein Video (sobald der Button schwarz ist, habe ich ihn geklickt)

    Externer Inhalt youtu.be
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    • Offizieller Beitrag

    Mach es anders, setze eine CSS-Klasse auf document.body und im Selektor wendest du dein CSS entsprechend an: .cssKlasseAusDemBody .interactiveDropdown { /* …*/ }. Ich hatte angenommen, dass du es bereits so machst, deswegen kam ich nicht vorher auf die Idee, dich darauf hinzuweisen.

    Ich probiere relativ häufig unterschiedliche Änderungen aus (Stylus und Tampermonkey sind toll), das Semi-Fixed User-Panel unter dem Logo ist auch ein Bestandteil davon.

  • Mach es anders, setze eine CSS-Klasse auf document.body und im Selektor wendest du dein CSS entsprechend an: .cssKlasseAusDemBody .interactiveDropdown { /* …*/ }. Ich hatte angenommen, dass du es bereits so machst, deswegen kam ich nicht vorher auf die Idee, dich darauf hinzuweisen.

    Ich probiere relativ häufig unterschiedliche Änderungen aus (Stylus und Tampermonkey sind toll), das Semi-Fixed User-Panel unter dem Logo ist auch ein Bestandteil davon.

    Würde das nicht aber auch dann greifen, wenn die Seite noch nicht gescrollt ist?

    Mein (S)CSS sieht aktuell so aus:

    CSS
    .five_dropdownMenuContainer {
            position: fixed;
            margin-top: 0px;
            
            & .interactiveDropdown {
                margin-top: -120px !important;
            }
        }
    • Offizieller Beitrag

    Die CSS-Klasse setzt du natürlich nur, wenn die Seite gescrolled ist, oder wie auch immer dein Aufbau ist. Der Sinn ist es, abhängig von pageYOffset === 0 die Positionierung zu ändern und genau das erreichst du mit diesem Vorgehen.

    Als Beispiel mal das Skript, dass ich für den Wechsel Fixed/Non-Fixed nutze:

    (Das ist kein ES6 JavaScript, da ich es nur in Chrome verwendet habe!)

    Und das hier ist der relevante Teil in Stylus:

    CSS
    body.pageHeaderFixed {
        padding-top: 55px;
    }
    .pageHeaderPanel.pageHeaderPanelFixed {
        position: fixed;
        top: 0;
    }
    .pageHeaderPanel.pageHeaderPanelFixed > .layoutBoundary {
        border-radius: 0;
    }

    ACHTUNG! Dies ist nur zur Illustration, der Code oben passt überhaupt nicht zu deinem Code, er soll nur verdeutlichen, wie ich in Abhängigkeit von der Scrollposition anderes CSS verwende.

  • Das sieht gut aus.

    Aber mein Problem ist ja eben das ich dem Element die Klasse nicht zuweisen kann. Da es (noch) nicht existiert.

    Es wird ja beim ersten Klick erstellt. Dann springt auf das Dropdown auf. Unpositioniert. Dann muss gescrollt werden damit mein JS funktioniert. Dein pageHeaderPanel wiederum gibt es ja immer. Mein Container leider nicht.

    Ich bräuchte also einen Listener fürs klicken. Im Prinzip in der Datei in der das Dropdown erstellt wird. Das finde ich aber doof weil ich dann in den Datein fuchteln müsste und nicht die Möglichkeiten über Template nutzen kann.

    Hast du eine Idee? Ich bin in JS leider noch nicht so belesen.

    • Offizieller Beitrag

    ES IST EGAL, OB DAS ELEMENT EXISTIERT ODER NICHT!

    Du setzt per JavaScript eine CSS-Klasse auf das <body>-Element, je nachdem ob die Seite gescrolled ist oder nicht. Im CSS beziehst du dich auf diese Klasse in Kombination mit dem Wunschelement und tada: Egal ob gescrolled oder nicht, es wird sich immer korrekt verhalten.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!