scrollbars.uc.js anpassen - geschafft und erledigt!

  • Firefox-Version
    103.02 (64Bit)
    Betriebssystem
    Windows 10 Version 21H2 (Build 19044.1889)

    Wie schon hier angesprochen, möchte ich, dass

    Chevron-up für Hoch

    Chevron-down für Runter

    &

    Chevron-left für Links

    Chevron-right für Rechts

    anstatt der "Dreiecke" erscheint.

    Egal was ich bisher versucht habe, es geht in die Hose.

    Ich schaffe es einfach nicht den eingebetteten CSS-Code so abzuändern, dass gewünschtes Resultat erfolgt.

    Das Script schaut so aus.

    Ich erbitte inständig Hilfe. ||

    Mit <3lichem Gruß

    Mira

  • Son Goku
    13. August 2022 um 15:43
  • Und warum dann einen weiteren Thread?

    Weil ich dachte, es sei besser und das vorgeschlagen habe. Ich bin vom Titel ausgegangen und hatte nicht daran gedacht, dass es ausschließlich um das Skript ging. Es hätte also ausgereicht, wenn Mira Belle das Threadthema umbenannt hätte.

    Wenn dir in dem anderen niemand eine Lösung anbieten kann, dann hilft dieser auch nicht.

    Oder niemand hat sich bisher die Zeit genommen, eine Lösung auszutüfteln. Oder wegen das allgemeinen Titels haben das manche übersehen.

  • Frage eines weiteren Script-Dummies:

    Gibt es in dem Script nicht eindeutige Bezeichner für die up-/down-/left-/-right-Dreiecke, die man in einem zusätzlichen .css durch Grafiken ersetzen kann, die einem mehr zusagen? :/

    W11 Home 64bit - FF120.x

  • Frage eines weiteren Script-Dummies:

    Gibt es in dem Script nicht eindeutige Bezeichner für die up-/down-/left-/-right-Dreiecke, die man in einem zusätzlichen .css durch Grafiken ersetzen kann, die einem mehr zusagen? :/

    Nein leider nicht!

    Die Fläche, bzw. ihre Unterteilung und somit auch die "Pfeile" wird/werden irgendwie berechnet.

    So ganz bin ich da noch nicht dahinter gestiegen.

    Siehe Zeile 207 bis 278, bzw. Zeile 280 bis 350.

    Wobei beide Blöcke sich nur wenig ganz am Anfang unterscheiden

    und

    das Script scheinbar auch ohne den Block Zeile 207 bis 278 funktioniert,

    aber nicht ohne Zeile 280 bis 350.

    Verstehe ich nicht.

    Mit <3lichem Gruß

    Mira

  • das Script scheinbar auch ohne den Block Zeile 207 bis 278 funktioniert,

    aber nicht ohne Zeile 280 bis 350.

    Verstehe ich nicht.

    Das ist logisch, wenn dein Code ansonsten genau so aussieht wie angegeben. Der erste von dir genannte Block definiert schließlich etwas, was überhaupt nicht aufgerufen wird, während der zweite von dir genannte Block etwas definiert, was auch aufgerufen wird. Natürlich kann nicht einfach Code entfernt werden, der auch tatsächlich genutzt wird.

  • Hi Sören, kannst Du mir das näher erklären?

    Denn ich lese da in Zeile 482 den Aufruf vom ersten Block

    und in Zeile 483 den Aufruf des zweiten Blocks.

    Oder interpretiere ich den Code am Ende etwas ganz falsch?

    Kannst Du mir so etwas wie einen Ablaufplan machen?

    Also nur so ganz grob?

    Mit <3lichem Gruß

    Mira

  • Mira_Belle:

    cs_scrollbars_scrollbar_button_arrows (Zeile207) ist in Zeile 73 auf "false" gesetzt und wird nicht benutzt/angesprungen.

    Wenn ich es auf "true" setzte, sind die Dreiecke weg, aber der Bereich noch da - der Slider geht z.B. nicht bis ganz nach oben.

    Vielleicht könnte man da eine eigene Grafik reinbugsieren, aber dafür bin ich heute zu müde, ma gucken, ob/wann ich nächste Woche Zeit zum rumtesten habe...

    W11 Home 64bit - FF120.x

  • Ich habe es nicht selbst ausprobiert, es müsste allerdings mit einer zusätzlichen Bilddatei möglich sein, wie sie man etwa unter Category:SVG chevron icons – Wikimedia Commons findet, und zwar unter Nutzung von der CSS-Eigenschaften border-image und von transform: rotate.

    Jetzt habe ich es ausprobiert und war bisher leider nicht erfolgreich. Mir fiel dabei auch wieder ein, dass ich schon einmal den von mir geänderten Code über die userChrome.css laden wollte (den Code vom Skript also übersteuern wollte), das aber damals schon nicht funktionierte, womöglich wegen der Ladereihenfolge von CSS und Userskript (nur Vermutung meinerseits) und im Skript auch schon !important genutzt wird.

    Gibt es in dem Script nicht eindeutige Bezeichner für die up-/down-/left-/-right-Dreiecke, die man in einem zusätzlichen .css durch Grafiken ersetzen kann, die einem mehr zusagen?

    Jein. Es gibt Bezeichner für den Bereich, wo die Dreiecke oder Ähnliches normalerweise dargestellt werden, das ist der Scrollbarbutton. Vier Varianten gibt es:

    Man muss im Skript eine entsprechende Variable auf true setzen, damit diese aktiv werden, wobei eine Variante davon standardmäßig aktiv ist. (Darauf bezieht sich im Prinzip auch Sören vor mir.)

    Mira_Belle: Du hast im abgeänderten Skript in Zeile 98 eine Variable hinzugefügt, nutzt diese aber später gar nicht. So ist das sinnlos. Du solltest in die Regel ab Zeile 172 (in Z. 173 oder 174) als weitere Zeile dieses einfügen:

    border-color: '+cs_thumb_hover_border_color+' !important;\

    Die Fläche, bzw. ihre Unterteilung und somit auch die "Pfeile" wird/werden irgendwie berechnet.

    So ganz bin ich da noch nicht dahinter gestiegen.

    Wie schon mal erwähnt, beruht das letztendlich auf CSS Triangle (CSS-Tricks.com), nur darf die Breite der Scrollbarbuttons nicht null sein. Länger noch mal hier: Triangle buttons · Issue #3 · Aris-t2/Scrollbars.

  • Mira_Belle:

    cs_scrollbars_scrollbar_button_arrows (Zeile207) ist in Zeile 73 auf "false" gesetzt und wird nicht benutzt/angesprungen.

    Wenn ich es auf "true" setzte, sind die Dreiecke weg, aber der Bereich noch da - der Slider geht z.B. nicht bis ganz nach oben.

    Vielleicht könnte man da eine eigene Grafik reinbugsieren, aber dafür bin ich heute zu müde, ma gucken, ob/wann ich nächste Woche Zeit zum rumtesten habe...

    Ah, Danke, habe ich verstanden.

    Jetzt habe ich es ausprobiert und war bisher leider nicht erfolgreich. Mir fiel dabei auch wieder ein, dass ich schon einmal den von mir geänderten Code über die userChrome.css laden wollte (den Code vom Skript also übersteuern wollte), das aber damals schon nicht funktionierte, womöglich wegen der Ladereihenfolge von CSS und Userskript (nur Vermutung meinerseits) und im Skript auch schon !important genutzt wird.

    Ich verstehe nur Bahnhof und es hat nicht geklappt.

    Gibt es in dem Script nicht eindeutige Bezeichner für die up-/down-/left-/-right-Dreiecke, die man in einem zusätzlichen .css durch Grafiken ersetzen kann, die einem mehr zusagen?

    Jein. Es gibt Bezeichner für den Bereich, wo die Dreiecke oder Ähnliches normalerweise dargestellt werden, das ist der Scrollbarbutton. Vier Varianten gibt es:

    Man muss im Skript eine entsprechende Variable auf true setzen, damit diese aktiv werden, wobei eine Variante davon standardmäßig aktiv ist. (Darauf bezieht sich im Prinzip auch Sören vor mir.)

    Mira_Belle: Du hast im abgeänderten Skript in Zeile 98 eine Variable hinzugefügt, nutzt diese aber später gar nicht. So ist das sinnlos. Du solltest in die Regel ab Zeile 172 (in Z. 173 oder 174) als weitere Zeile dieses einfügen:

    border-color: '+cs_thumb_hover_border_color+' !important;\

    Das verstehe ich schon eher und darauf bin ich auch gekommen.

    Nun wird mir meine Erkenntnis bestätigt.

    Zeile 98 ist nicht vonnöten, wollte nur etwas ausprobieren. Wird gelöscht.

    Die Fläche, bzw. ihre Unterteilung und somit auch die "Pfeile" wird/werden irgendwie berechnet.

    So ganz bin ich da noch nicht dahinter gestiegen.

    Wie schon mal erwähnt, beruht das letztendlich auf CSS Triangle (CSS-Tricks.com), nur darf die Breite der Scrollbarbuttons nicht null sein. Länger noch mal hier: Triangle buttons · Issue #3 · Aris-t2/Scrollbars.

    Verstehen tu ich es nicht, aber ich erahne da was.

    Ich glaube zu erahnen, da ja die "Pfeile" quasi "errechnet" werden, wird es nicht so einfach möglich sein

    in die Flächen ein Symbol zu "schmuggeln".

    Auch wenn man alle Werte bei dem Verfahren auf "transparent" setzt?

    Also, die Fläche wird aus den Werten custom_scrollbar_size_value und cs_arrows_on_buttons_buttons_size

    gebildet, richtig?

    Mit dem Triangel-Verfahren wird dann das entsprechende Dreieck generiert, richtig?

    Mit <3lichem Gruß

    Mira

    3 Mal editiert, zuletzt von Mira_Belle (14. August 2022 um 22:21)

  • Ich habs noch nicht ins Bett geschafft, weil mir was von Aris Github-Seite im Hinterkopf rumschwirrte.

    Jetzt hab ich die Versionen 1.0.0 bis 1.0.3a auf platte liegen und werd ersma testen, was die machen und ob die für meine Zwecke/Vorstellungen nicht schon reichen.

    Jezz is abba wirklich :sleeping:

    guuts nächtle...

    W11 Home 64bit - FF120.x

  • Normalerweise müsste der Code für die Pfeile

    bei einem Quadrat also so aussehen.

    CSS
          border-left: 'WERT'px solid transparent !important;\
          border-right: 'WERT+'px solid transparent !important;\
          border-bottom: 'WERT'px solid transparent !important;\
          border-top: 'WERT'px solid Farbe !important;\

    Links, rechts, unten würde nicht angezeigt werden

    und oben schon, somit ein Dreieck mit Spitze nach unten.

    Also das Triangel-Gedöhns habe ich nun verstanden :!:

    Es bringt mich nur nicht wirklich weiter!

    Wie ersetze ich die errechnete Fläche, z.B.

    JavaScript
        scrollbar[orient="vertical"] > scrollbarbutton {\
          min-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
          height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
          max-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
          min-width: '+custom_scrollbar_size_value+'px !important;\
          width: '+custom_scrollbar_size_value+'px !important;\
          max-width: '+custom_scrollbar_size_value+'px !important;\
        }\

    durch ein Symbol?

    Selbst wenn bei der Rechnung hight: 16px width: 16px herraus kommt,

    fehlt mir jede Idee, wie

    JavaScript
        scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
          border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
          border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
          border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\
        }\

    so geändert werden müsste, dass da in etwa so etwas wie

    CSS
            mask-image:  url("file:///C:/Users/.../chrome/icons/chevron-down.svg") !important;
            mask-repeat: no-repeat;
            mask-position: center;
            background-color: #e1e1e1 !important;

    stehen könnte?

    Denn so geht es nicht :!:

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (14. August 2022 um 23:05)

  • Klappt noch nicht ||

    Auch


    Wäre ja auch zu einfach gewesen. X(

    Mit <3lichem Gruß

    Mira

  • Bin der Sache auf der Spur.

    Es funktioniert nur noch nicht so wie gewünscht.

    Oben habe ich einen roten Pfeil, und drauf geklickt verschiebt sich der Slider auch wie gewünscht nach oben.

    Aber auch unten habe ich den gleichen roten Pfeil und auch da verschiebt sich der Slider nach oben!

    So sollte es aber eigentlich nicht sein X(

    Das "Hovern" funktioniert natürlich auch noch nicht.

    Mit <3lichem Gruß

    Mira

  • Mira_Belle :

    Magst Du bitte Deinen kompletten Code einstellen?

    Damit meinereiner immer alle von Dir getroffenen Einstellungen zum Nachvollziehen hat.

    Mich interessiert diese Bastelei auch sehr und ich würde mir dann dafür einen extra Bastel-FF einrichten.

    bis später...

    W11 Home 64bit - FF120.x

  • Mira_Belle :

    Magst Du bitte Deinen kompletten Code einstellen?

    Damit meinereiner immer alle von Dir getroffenen Einstellungen zum Nachvollziehen hat.

    Mich interessiert diese Bastelei auch sehr und ich würde mir dann dafür einen extra Bastel-FF einrichten.

    bis später...

    Viel Spaß. :)

    Mit <3lichem Gruß

    Mira

  • Habe nun noch etwas weiter, nach dem Motto, denn Sie weiß nicht, was Sie tut, gebastelt.

    Das Script schaut nun wie folgt aus.

    Jedoch, wie sollte es anders sein, habe ich keine Ahnung ....

    warum das Script tut was es tut.

    So will ich das nicht. X(

    Der Button oben ist doppelt so lang (16*32), warum?

    Und das Symbol ist auch das Falsche. ||

    Unten schaut es schon besser aus!

    Button hat richtige Größe und richtiges Symbol

    und reagiert auch richtig :!:

    Und in der Scrollbar unten (left-right) haben die Buttons zwar die richtige Größe

    und reagieren auch richtig,

    aber die Symbole fehlen. :(


    Habe angefangen auch etwas zu entmüllen!

    Nun geht es aber .... :sleeping:

    Bin eh mit meinem Latein am Ende.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (15. August 2022 um 23:44) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

  • Nächster Versuch, geht auch in die Hose!


    Und weil Bilder mehr als tausend Worte sagen,

    Wie man unschwer erkennen kann, die Symbole werden nicht an die Größe angepasst!

    Die Schaltfächen (Buttons) werden nicht richtig ....

    Und die Positionen der Buttons stimmen ja auch nicht.

    Gibt es hier on Board denn wirklich kein JavaScipt-Experten?

    Sören Hentzschel, 2002Andreas, .DeJaVu, Speravir, Endor.

    Ihr seid hier die aktivsten User, kann jemand von Euch mir auf die Sprünge helfen,

    oder kennt jemand von Euch jemanden, der sich mit Javascript auskennt?

    Denn ich bin mit meiner "Unwissendheit" nun föllig am Ende

    und habe keine Ahnung was ich noch ausprobieren könnte.

    Ich bin mir absolut sicher, dass das Script so umgeschrieben werden kann,

    dass es wie von mir gewünscht funktioniert.

    Jedoch reichen meine "Erkenntnisse" einfach nicht aus um die zu bewerkstelligen.

    Ich könnnt ;(

    Und ich habe mir so eine Mühe gegeben.

    Mit <3lichem Gruß

    Mira