Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

  • Code
    if( startVisibility === true || startVisibility === false ) {     
        document.getElementById('PersonalToolbar').style.height = startVisibility;
    }
    else {  
           document.getElementById('PersonalToolbar').style.height = '22px';   
    }

    Habe mir nicht alles angeschaut, aber diese Abfrage ist absolut sinnlos.

    Wie Sören schon geschrieben hat:

    In startVisibility speicherst du ausschließlich boolsche-Werte und dann fragst du mit 'logischem oder' beide Werte ab. Also ist die Bedingung immer(!) erfüllt und dann setzt du als Höhe auch noch 'true' oder 'false', was dann natürlich nicht funktioniert. In den else-Zweig wird er nie kommen. Wenn die Sichtbarkeit 'false' ist, dann musst du als Höhe '0px' setzen und sonst (else) '22px', wie es ja auch schon dasteht.


    Also etwas so:

    JavaScript
    if( startVisibility === false ) {     
        document.getElementById('PersonalToolbar').style.height = '0px';
    }
    else {  
           document.getElementById('PersonalToolbar').style.height = '22px';   
    }

    Einmal editiert, zuletzt von BrokenHeart (19. Dezember 2022 um 14:35) aus folgendem Grund: Ein Beitrag von BrokenHeart mit diesem Beitrag zusammengefügt.

  • ;(

    Verstehe nur Bahnhof.

    Ich habe doch nur ...

    JavaScript
        if( startVisibility === 'visible' || startVisibility === 'collapse' ) {
            document.getElementById('PersonalToolbar').style.visibility = startVisibility;
       }

    ... ändern wollen, d.h. 'visible' duch ? ersetzen, z.b. true oder '22px' und 'collapse' z.B. false oder '0px'.

    Aber weder noch funktioniert.

    Da funktioniert der Code doch genau so.

    Mit <3lichem Gruß

    Mira

  • Das ursprüngliche Script von Brokenheart - hier - hatte ich zum Testen mal so auf height Funktion umgestellt, und funktioniert bei mir auch .

    Die Einträge fürs Icon müsstest Du für dich anpassen bzw aus Deinem Script übernehmen , und die Pixelwerte nach Wusch ändern .

    In der CSS braucht's dazu noch :

    CSS
    #PersonalToolbar {
        min-height: 0 !important;
    }

    3 Mal editiert, zuletzt von Horstmann (19. Dezember 2022 um 19:17)

  • Es kann auch sein dass nur ein CSS Eintrag fehlt, dann passiert was Du beschreibst auch :

    CSS
    #PersonalToolbar {
        min-height: 0 !important;
    }

    DAS war es :!:

    Danke.

    Besteht die Möglichkeit, diesen CSS-Code irgendwie in dem Script unter zubekommen?

    Hier das JavaScript, welches ich nach Deinem Muster geändert habe und wie ich es z.Z. nutze :

    Mit <3lichem Gruß

    Mira

    2 Mal editiert, zuletzt von Mira_Belle (19. Dezember 2022 um 21:13)

  • Besteht die Möglichkeit, diesen CSS-Code irgendwie in dem Script unter zubekommen?

    Des Rätsels Lösung:

    JavaScript
        document.getElementById('PersonalToolbar').style.minHeight = '0';

    Freut mich dass es klappt . :)

    Nur eines mit Deiner min-heightt im Script statt CSS :


    Damit wird beim Verwenden einer transition beim Öffnen von FF diese Animation abgespielt .

    D.h. trotz geschlossener Lesezeichenleiste als Anfangszustand im Script, wird FF mit offener Leiste gestartet, und die Leiste schliesst sich dann aber selbstständig und sofort entprechend der Animation .

    Kannst mal testen mit z.B. :

    CSS
    #PersonalToolbar {
        transition: all 0.5s ease !important;
    }

    Ich selber wollte unbedingt die Animation , das ein Mitgrund für die Übung, aber ohne die scheint es keinen Unterschied zu machen .


    Gleiches Problem wenn ich beides ins Script packe statt in CSS, etwas so :

    JavaScript
    PersonalToolbar.style.setProperty('min-height', '0', 'important' );    
    PersonalToolbar.style.setProperty('transition', 'all 0.5s steps(6, end)', 'important' );

    Und damit Sören nicht moppert ;) , es scheint auch alternativ zu deinem Code das zu reichen :

    JavaScript
    PersonalToolbar.style.minHeight = '0';
  • Ich habe mir mal die Freiheit genommen und diese tolle Arbeit zu einem Code zusammengefügt, vielleicht kann's ja jemand brauchen. Ob das allerdings noch mit dem Update auf 109 funktioniert, weiss ich nicht.

    Für die PersonalToolbar:

    und hier für die nav-bar:

    Einmal editiert, zuletzt von visoer (24. Dezember 2022 um 20:26) aus folgendem Grund: Überflüssigen Quellcode gelöscht

  • Ich habe mir mal die Freiheit genommen und diese tolle Arbeit zu einem Code zusammengefügt, vielleicht kann's ja jemand brauchen. Ob das allerdings noch mit dem Update auf 109 funktioniert, weiss ich nicht.

    Danke , macht einen guten Eindruck ! :)

    Selber benutze ich für diverse Versionen zum Einklappen der Lesezeichenleiste nur noch das hier , bzw Varianten davon .

    Mit der vorrangig CSS basierten Rangehensweise bekommt man eine Menge Kontrolle über alle relevanten Elemente , was v.a. Sinn macht wenn man vertikal geht mit der Leiste .

    Nur eines in deinen Scripts : sollten b1 und b2 nicht jeweils d1 und d2 heissen ?

  • Ja, das habe ich bereits wieder gelöscht.

    War überflüssig, kommt von diesem Relikt hier:

    Ein persönlicher Touch.

    Danke fürs Testen und selbstverständlich für die tolle Leistung!

  • Ja, das habe ich bereits wieder gelöscht.

    War überflüssig, kommt von diesem Relikt hier:

    Ein persönlicher Touch.

    Danke fürs Testen und selbstverständlich für die tolle Leistung!

    Ah, verstehe .

    Und so sehr ich mich über Komplimente freue :) - es ist etwas unverdient, und sollte an BrokenHeart gehen, der ( mindestens ) den Grossteil der Arbeit gemacht hat . :thumbup:

  • Wer weiß schon woher die merkwürdigen Variablennamen d1 d2 oder die Funkktionsnamen ntbut/btbut kommen.

    Dieser Namensgeber war sicherlich der Urheber des Ganzen.

    Der Dank gebührt Allen, die daran beteiligt waren.

    Für mich zählt nur das: Bis zum nächsten Update ist das Problem gelöst!

  • Aus Gründen der Aktualität , hier noch ein kurzer Hinweis zu einem dem Thema verwandten Thread .

    Diverse Lösungen zu Problemen, Updates und/oder Erweiterungen zu den hier aktuellen Scripts finden sich auch dort, teils mit Erläuterungen .

    Im Sinne der Forenhygiene hier nur Links zu den wesentlichen Scriptvarianten , in chronologischer Reihenfolge :

    - Scriptvariante von Andreas ; benutzt altes Konzept mit visibility plus simple CSS Regel ; elegant einfach, wenn auch eher sparsam erläutert . ;)

    - Eine weitere Scriptvariante von visoer , der so langsam im Verdacht steht sich mit Javascript auszukennen . ;)

    - Die neuste(?) Variante von Mira , mit Anregungungen für zusätzliche Komponenten im Script; erfreulich enthusiastisch wie immer . :)

  • wenn auch eher sparsam erläutert .

    Ein Blick in das Skript, und schon sieht man genau was jetzt anders ist. ;)

    Und ich denke auch, dem User war es egal was ich geändert habe, ihn interessiert nur dass das Skript wieder funktioniert, und die Lesezeichensybolleiste wieder kompl. mit Inhalt angezeigt wird.

    Ansonsten hätte er nachgefragt.

  • Eine Frage stellt sich mir noch zu diesem Script, und ähnlichen .

    Der im Script eingebundene Mausklick ruft die Funktion(Ein-/Ausblenden der Leiste) mit jedem Mausklick auf, egal ob die linke, mittlere oder rechte Maustaste benutzt wird .

    Der Rechtsklick (Kontextmenu) des Buttons bleibt als Funktion erhalten, nur wird gleichzeitig bei Rechtsklick auch die Lesezeichenleiste geschaltet .

    Kein Drama, aber netter wäre wenn nur der linke Mausklick die Lesezeichenleiste ein- und ausklappen würde .

    Ich benutze diese Version , die auch mit einigem CSS verknüpft ist, aktuell mit dem Javascript hier :

    Das Prinzip ist bei den anderen Scripts hier gleich eingebunden - die sind evtl. zum Testen einfacher , ohne sich um meinen CSS Kram kümmern zu müssen.

    Ein Beispiel für getrennte Funktion der einzelnen Maustasten hatte ich hier gesehen und benutzte diese Script auch; schaffe es aber nicht die entsprechenden Einträge in das Lesezeichenleiste Script zu integrieren .

  • Kein Drama, aber netter wäre wenn nur der linke Mausklick die Lesezeichenleiste ein- und ausklappen würde .

    Wenn nur die linke Maustaste abgefragt werden soll:

    JavaScript
    function onClick(aEvent) {
        if( aEvent.button == 0 ) {
            PersonalToolbar.classList.toggle("low-mode");
        }
    }

    Info zum MouseButton-Event:

    MouseEvent.button - Web APIs | MDN
    The MouseEvent.button read-only property indicates which button was pressed on the mouse to trigger the event.
    developer.mozilla.org
  • Wenn nur die linke Maustaste abgefragt werden soll:

    Herzlichen Dank, funktioniert perfekt ! :)

    Die MDN Seiten hatte ich mir schon angeschaut, aber zur Umsetzung in Code fehlen mir die Basis Javascript Kentnisse - copy & paste kann ich aber gut . ;)

    Edit: Leider zu früh gefreut - mit der Änderung im Code funktioniert das Tastaturkürzel nicht mehr , nur noch der Button . :?:

    So sieht das im Ganzen aus :

    Einmal editiert, zuletzt von Horstmann (7. Januar 2023 um 10:08)

  • Edit: Leider zu früh gefreut - mit der Änderung im Code funktioniert das Tastaturkürzel nicht mehr , nur noch der Button . :?:

    Abgesehen davon, dass bei mir dein Script überhaupt nicht funktioniert, kannst du das mal testen:

  • Abgesehen davon, dass bei mir dein Script überhaupt nicht funktioniert, kannst du das mal testen:

    Nochmals vielen Dank, mit den Änderungen klappt das jetzt ! :)

    Das Script funktioniert nur zusammen mit CSS Regeln , zB so etwas :

    Ohne CSS macht es nix; ist so gewollt v.a. für einige andere Experimente mit vertikalen Toolbars etc., wo dann noch mehrere andere selbstdefinierte .class Attribute zusätzlich verwendet werden .