Mootools Styled Scrollbar

Liebe Community,

ich möchte eine vertikale Scrollbar farblich anpassen, habe auch entsprechende Links im alten Forum gefunden, wie man das heutzutage macht:
http://solutoire.com/2008/03/10/moot...led-scrollbar/
http://greengeckodesign.com/?q=mooscroll
Leider komme ich mit keiner der Anleitungen zurecht. Gibt es irgendwo eine Step-by-step-Anleitung?
Versucht habe ich, wie im ersten Link beschrieben: Ich binde die js-Datei ein:

Code:

---

<script type="text/javascript" src="plugins/mootools/mootools1.2b.js"></script>

---

Ich habe "#main .inside" auf "auto" gesetzt - und was mache ich mit "The Code"? Was muss ich wo anpassen? Brauche ich noch zusätzliche Dateien?
Es geht nur im die Farbe, keine andere Grafik.

Vielen Dank!
Almitra

Hallo Almitra,

herzlich Wilkommen im TYPOlight-Forum. :D

1) js-Datei auf Server übertragen
2) Einbindung der js-Datei in das Layout/ Template
3) Definition/ Einbindung des dazugehörigen CSS
4) Zuweisung der entsprechenden CSS-Klassen an das Scroll-Element

Wenn Du diese Schritte ausgeführt hast, sollte es eigtl. funktionieren.

MfG
Peter

Hallo!

Ich hab das einmal mit erfolg probiert mit folgender
http://tools.uvumi.com/scrollbar.html

Und im alten Forum den Beitrag
https://contao.org/board/message/74071.html


mootools brauchst du in dem Fall nicht noch einmal einbinden das das eben schon über Tl eingebunden wird

So bin ich vorgegangen

ich habe der Seite, wo ich die Scrollbars haben wollte ein neues Seitenlayout zugewiesen.

dort habe ich dann bei zusätzlichen head Tags folgendes eingefügt

<script type="text/javascript" src="pfad_zum_javascript/UvumiScrollbar-compressed.js"> </script>
<script type="text/javascript">
var myScrollbar = new UvumiScrollbar('scrollable');
</script>

die datei UvumiScrollbar-compressed.js hab ich eben in das oben angegeben verzeichnis kopiert. Das Verzeichnis "plugins" würde sich anbieten denke ich

dann hab ich dem Inhaltselement welches ich scrollbar machen wollte noch die CSS-ID scrollable zugewiesen (muss gleich heißen wie die oben im head Tag angegebene UvumiScrollbar)

dann habe ich nur noch die css Anweisung

#scrollable
{
height:350px;
}
in eine CSS datei eingetragen und das sollte es dann gewesen sein.

natürlich hab ich das uvumi css File zuerst importiert und dann auch beim Seitenlayout hinzugefügt.

Viel Erfolg damit

Guten Morgen und vielen Dank euch beiden!

Nun sehe ich, dass auch die Uvumi-Lösung bei deaktiviertem Javascript nicht mehr scrollbar ist.
Nur die Lösung: http://greengeckodesign.com/?q=mooscroll
funktioniert dann noch mit Standard-Scrollbars. Und sie zeigt zudem keine Scrollbar, wenn der Inhalt kürzer ist.

Hat mit dieser Variante schon jemand Erfahrung mit TYPOlight? Gibt es etwas was dagegen spricht?

Vielen Dank und lieben Gruß,
Almitra

Hallo Almitra,

die Empfehlung von savi verfügt ebenfalls über eine Fallback-Lösung und die Anzeige der Scrollbar erfolgt anscheinend auch nur in Abhängigkeit von der Notwendigkeit. Welcher der beiden Ansätze (greengecko oder Uvumi) nun die bessere Wahl darstellt ist allerdings schwer zu beurteilen – zumindest theoretisch sollten beide Varianten ohne Probleme funktionieren. Wenn Du Hilfe bei der Umsetzung benötigst, melde Dich bitte einfach.

MfG
Peter

Kann man die vertikale Scrollbar mittels Mootools bei aktivem Javscript eigentlich auch von der rechten (default) Seite auf die linke Seite einer Box bringen? Hab gerade einen Designer hier, der das unbedingt haben will ...

Zum Beispiel so, aber vermutlich nicht in allen Browsern:

Code:

---

<style type="text/css"> body { direction:rtl; } </style>

---

Musst Du mal testen, inwieweit nicht IEs das mitmachen.

LG, Carolina.

Zitat:

---

Kann man die vertikale Scrollbar mittels Mootools bei aktivem Javscript eigentlich auch von der rechten (default) Seite auf die linke Seite einer Box bringen?

---

So wie ich das gesehen habe sollte es kein Problem sein. Der Scrollbalken ist eigentlich nur ein weiteres Div das platziert wird mittlws position right:0 habs kurz im Firebug mit left:0 probiert und schon war der Scrollbalken links. Ich vermute die Angeben müssen allerdings irgendwo im Javascript gemacht werden.
getestet mit uvumi aber ich vermute die funktionieren alle gleich.

edit: Habs grad ausprobiert und im javascript die Positionsangabe ersetzt. Funktioniert auf den ersten Blick einwandfrei und ist wirklich keine Hexerei gewesen.

Hallo,
irgendwie komme ich nicht ganz klar mit dem grennghecko scrollbar design? Wenn ich das einbinden will, muss ich dem Artikel selber oder den Artikel-Elementen die CSS Angabe verpassen. Irgendwo fehlt wahrscheinlich etwas bei meiner Installation.

Also:
js files in ordner -> greenghecko
css files in ordner -> greenghecko

wie weiter? irgendwo sollte ich doch dem Artikel der ja auf #main .inside reagiert von der layout.css eine Anweisung zuweisen??

Kann mir da jemand ein Tipp geben der das mit greenghecko geschafft hat?

mfg

iku:o

Hallo zusammen,

ich wollte mal fragen ob mitlerweile zufällig jemand eine Anleitung für die Einbindung des MooScrolls von: http://greengeckodesign.com/?q=mooscroll in Contao hat. Ich bekomme das nicht hin. Bitte helft mir. :rolleyes:

Viele Grüße
shabby

Hallo Shabby,
ich habe dann doch die UvumiScrollbar hinbekommen lt. Anleitung von Savi, funktioniert prima - deshalb kann ich leider nichts beitragen zum Greengecko-Thema.
Alles Liebe, Almitra

Hallo Almitra,

danke für deine Antwort. Ich hab das jetzt auch so gemacht, aber sobald ich die UvumiScrollbar-compressed.js benutze, funktionieren meine Mootools-Plugins nicht mehr. Hattest du dieses Problem auch? Wenn ja, hast du eine Lösung dafür? Ich nutze übrigens Contao 2.9.0.

Gruß
shabby

Kann mir niemand helfen?
Die JS-Dateien scheinen sich gegenseitig zu stören. Weiß jemand wie man das beseitigen kann?

Gruß
shabby