scrollbars.uc.js anpassen - geschafft und erledigt!

  • Das fertige JavaScript :!:

    Kinder zu bekommen einfacher.


    Mit <3lichem Gruß

    Mira

  • Mira_Belle 18. August 2022 um 13:53

    Hat den Titel des Themas von „custom_scrollbars.uc.js anpassen“ zu „scrollbars.uc.js anpassen - geschafft und erledigt!“ geändert.
  • :?:Frage:

    (Wie) kamm man die Scrollbars breiter bzw höher machen?

    Das hier:

    var custom_scrollbar_size_value = 17; // in px // default: custom_scrollbar_size_value = 17

    führt bei Wertänderungen zu nix, weil die Variable nirgendwo mehr auftaucht...

    W11 Home 64bit - FF120.x

  • Antwort (30 Minuten später):

    CSS
          scrollbar[orient="vertical"] {\
            background-image: '+cs_background_image_vertical+' !important;\
            width: '+custom_scrollbar_size_value+'px !important;\
          }\
          scrollbar[orient="horizontal"] {\
            background-image: '+cs_background_image_horizontal+' !important;\
            height: '+custom_scrollbar_size_value+'px !important;\
          }\

    Und so bekommt man unten rechts inne Ecke was rein:

    CSS
          scrollcorner {\
            background-color: '+cs_corner_background_color+' !important;\
            background-image: url("file:///D:/01_gfx/scroller/doppelpfeil.svg") !important;\
            width: '+custom_scrollbar_size_value+'px !important;\
          }\

    Sieht bei mir hier b.a.w. so aus:

    W11 Home 64bit - FF120.x

  • :?:Frage:

    (Wie) kamm man die Scrollbars breiter bzw höher machen?

    Das hier:

    var custom_scrollbar_size_value = 17; // in px // default: custom_scrollbar_size_value = 17

    führt bei Wertänderungen zu nix, weil die Variable nirgendwo mehr auftaucht...

    Da war ich wohl etwas zu eifrig. Sorry.

    Aber Danke für die Korrektur.

    Habe den Code wieder eingepflegt.

    Mit <3lichem Gruß

    Mira

  • Der eigentliche Grund ist aber, dass die normale 'userChome.css' als 'USER_SHEET' registriert und ausgeführt wird. Damit kann man aber bestimmte Elemente(z.B. Scrollbars) der Firefox-Oberfläche nicht erreichen, bzw sie werden wieder überschrieben.

    Ach du Sch*, das erklärt natürlich, dass sich nicht erfolgreich war. :(

    Würde es mit dem UserCSSLoader funktionieren? Endor, ist doch die aktuelle Version, oder?

  • Würde es mit dem UserCSSLoader funktionieren? Endor, ist doch die aktuelle Version, oder?

    Ja, ich denke, dass sollte funktionieren. Ich benutze den UserCSSLoader nicht, aber wenn ich mir den Code und die Kommentare anschaue, dann wird dort explizit zwischen 'USER_SHEET' und 'AGENT_SHEET' unterschieden. Zum Ausführen als 'AGENT_SHEET'

    muss man dann wohl die css-Datei als .as.css abspeichern. Ansonsten einfach mal ausprobieren... ;)

  • Hallo Speravir.

    Vom usercssloader.uc.js Script habe ich hier eine aktuellere Version,

    vielleicht testet ihr die mal.

    Wie man sieht unterstützt sie jetzt auch Author_Sheet:

    JavaScript
    AGENT_SHEET: Ci.nsIStyleSheetService.AGENT_SHEET,
    USER_SHEET : Ci.nsIStyleSheetService.USER_SHEET,
    AUTHOR_SHEET: Ci.nsIStyleSheetService.AUTHOR_SHEET,

    Quelle kann ich keine Angeben, da das Original Script von Griever

    nicht mehr geht. Aborix und andere Leute aus Asien haben es
    dann wieder laufffähig gemacht. Die aktuelle Änderung habe ich in
    einem Script aus den asiatischen Tiefen gefunden, und dann in unsere
    Version übertragen.

    Mfg.
    Endor

    Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/124.0.1
    OS: Windows 10 pro 64 bit und Windows 10 Home 64 bit
    Meine Scripte Sammlung: https://github.com/Endor8/userChrome.js
    Kein Support per PN. Fragen bitte im Forum stellen!

    2 Mal editiert, zuletzt von Endor (22. August 2022 um 21:17)

  • Kinder zu bekommen einfacher.

    Ich kenne da einige Frauen, die da eine ganz eigene Meinung zum Thema "schwere Geburt" haben! ;)

    Hauptsache "dein Baby" passt jetzt so für dich... :thumbup: ^^

    Endor : :thumbup: Ja, muss ich mir auch mal anschauen, klingt nicht uninteressant -> "AUTHOR_SHEET". Obwohl, lässt sich natürlich auch mit einem JavaScript so starten :/ . Mal schauen was komfortabler ist...

    Einmal editiert, zuletzt von BrokenHeart (19. August 2022 um 13:27)

  • Mira_Belle.

    Ja könnte eventuell so sein.

    Aber Deine Version die Du gemacht hast ist definitiv die bessere
    Variante, da sie unabhängig von anderen Scripten funktioniert.
    Übrigens klasse Arbeit!!! :thumbup: :thumbup:

    Mfg.
    Endor

    Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/124.0.1
    OS: Windows 10 pro 64 bit und Windows 10 Home 64 bit
    Meine Scripte Sammlung: https://github.com/Endor8/userChrome.js
    Kein Support per PN. Fragen bitte im Forum stellen!

  • Hätte ich das usercssloader.uc.js Monster gehabt,

    hätte ich ein ganz normales CSS schreiben können?

    Hättest du in deinem Script auch. Die Schreibweise mit dem \ nach jeder Zeile ist nur eine Möglichkeit. Seit ECMAScript 6 (a.k.a. ECMAScript 2015)* gibt es auch eine andere Schreibweise, die kein spezielles Zeichen nach jeder Zeile verlangt und damit im Prinzip „normales CSS“ ist.

    *) ECMAScript ist der Standard, auf dem JavaScript basiert.

    Die Funktionsweise sogenannter Template Literals ist wie folgt:

    JavaScript
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('
    '), null, null);

    Ersetze ' durch `:

    JavaScript
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
    `), null, null);

    Ersetze die Zuweisung von Variablen.

    Beispiel Alt:

    JavaScript
    scrollbar {
      background-color: '+cs_background_color+' !important;
    }

    Beispiel Neu:

    JavaScript
    scrollbar {
      background-color: ${cs_background_color} !important;
    }

    Abschließend: Entferne alle \.

  • Hätte ich das usercssloader.uc.js Monster gehabt,

    hätte ich ein ganz normales CSS schreiben können?

    Hättest du in deinem Script im Prinzip auch. Die Schreibweise mit dem \ nach jeder Zeile ist nur eine Möglichkeit. Seit ECMAScript 6 (a.k.a. ECMAScript 2015)* gibt es auch eine andere Schreibweise, die kein spezielles Zeichen nach jeder Zeile verlangt und damit im Prinzip „normales CSS“ ist.

    *) ECMA ist der Standard, auf dem JavaScript basiert.

    ...

    Cool.

    Und vielen Dank,

    nur was mach ich mit der letzten Zeile?

    JavaScript
        ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
      }
    };
    // enable settings as configured above
    custom_scrollbars.init()

    Zeile 194 wird im Visual Studio Code als Fehler gemarkert!

    Dadurch funktioniert das ganze Script natürlich nicht.

    Wie muss der Code also abgeschlossen werden?

    Mit <3lichem Gruß

    Mira

  • Das "neue" JavaScript,

    inkl. Korrekturen und mit Sörens Vorschlag geändert!

    resizer.zip

    Viel Spass damit, vor allem beim Basteln.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (19. August 2022 um 14:53) aus folgendem Grund: Kleine Korrektur am Script (Zeile 12)

  • Super. Jetzt musst du nur noch alle var ersetzen, damit die IDE des Vertrauens (in meinem Fall PhpStorm) nicht mehr jedes var unterkringelt. :D Normalerweise sollte alles zu const werden können, da ja nichts nachträglich überschrieben wird, ansonsten eben let.

    Und folgende Variablen-Deklarationen kannst du entfernen, weil diese im CSS überhaupt nicht mehr berücksichtigt werden:

    • custom_opacity_value
    • cs_thumb_hover_image_horizontal
    • cs_buttons_image_vertical
    • cs_buttons_image_horizontal
    • cs_buttons_hover_color
    • cs_buttons_hover_image_vertical
    • cs_buttons_hover_image_horizontal

    Zwei Typos in den Kommentaren noch, weil wir ja perfekt sein wollen: ;)

    • Javascipt -> JavaScript
    • Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4, 1,75 -> das Komma am Ende sollte ein Punkt sein
  • Super. Jetzt musst du nur noch alle var ersetzen, damit die IDE des Vertrauens (in meinem Fall PhpStorm) nicht mehr jedes var unterkringelt. :D Normalerweise sollte alles zu const werden können, da ja nichts nachträglich überschrieben wird, ansonsten eben let.

    Zwei Typos in den Kommentaren noch, weil wir ja perfekt sein wollen: ;)

    • Javascipt -> JavaScript
    • Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4, 1,75 -> das Komma am Ende sollte ein Punkt sein

    Die Zeile mit der Deckkraft habe ich aber aus dem "Original" so übernommen.

    geändert in  - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1,75

    Und folgende Variablen-Deklarationen kannst du entfernen, weil diese im CSS überhaupt nicht mehr berücksichtigt werden:

    • custom_opacity_value
    • cs_thumb_hover_image_horizontal
    • cs_buttons_image_vertical
    • cs_buttons_image_horizontal
    • cs_buttons_hover_color
    • cs_buttons_hover_image_vertical
    • cs_buttons_hover_image_horizontal

    Gelöscht.

    Super. Jetzt musst du nur noch alle var ersetzen, damit die IDE des Vertrauens (in meinem Fall PhpStorm) nicht mehr jedes var unterkringelt. :D Normalerweise sollte alles zu const werden können, da ja nichts nachträglich überschrieben wird, ansonsten eben let.

    Erledigt. Ist aber wohl nur eine Schönheitskorrektur?

    var => Variable

    const => Konstande

    Macht für mich eigentlich Variable mehr Sinn, ist aber geändert.

    Mit <3lichem Gruß

    Mira

  • Die Zeile mit der Deckkraft habe ich aber aus dem "Original" so übernommen.

    geändert in - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1,75

    Ich meinte 1,75 muss 1.75 heißen. ;)

    Erledigt. Ist aber wohl nur eine Schönheitskorrektur?

    var => Variable

    const => Konstande


    Macht für mich eigentlich Variable mehr Sinn, ist aber geändert.

    Nein, nicht nur eine Schönheitskorrektur, es gibt Unterschiede zwischen var, let und const. Siehe:

    Var, Let, and Const – What's the Difference?
    A lot of shiny new features came out with ES2015 (ES6). And now, since it's 2020, it's assumed that a lot of JavaScript developers have become familiar with…
    www.freecodecamp.org

    In modernem JavaScript verwendet man normalerweise überhaupt kein var mehr. Wo const nicht funktioniert, weil der Wert an anderer Stelle überschrieben wird, kann stattdessen let genutzt werden.