Eigener Scrollbalken in der Textarea

  • Mit jScrollPane kann man ein eigenen Scrollbalken verwenden, statt den Standard.
    So einer soll in der textarea eines Kontaktformulars stattfinden.


    Soweit ich dem folgen kann, muss man folgendes tun:

    Die Dateien:

    jQuery
    jScrollPane.js
    jScrollPane.css

    runterladen und in ein extra Ordner auf dem Server kopieren.

    Danach diesen Code:

    [FONT=Lucida Console][size=8]<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.em.js"></script>
    <script type="text/javascript" src="scripts/jScrollPane.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="styles/jScrollPane.css" />[/SIZE][/FONT]

    in die header.php Datei kopieren und wie man dann das ganze mit der textarea verknüpft bleibt mir ein Rätsel.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Zitat

    wie man dann das ganze mit der textarea verknüpft bleibt mir ein Rätsel.

    Die Antwort lautet möglicherweise "gar nicht, es wird einfach auf alle Scrollbalken angewendet". Ist aber nur geraten, genaueres sollte die Doku des jQuery-Plugins verraten. Schaue im übrigen, dass Du dann jQuery nicht doppelt lädst, wenn Du es so einbindest. Viele Themes enthalten das ja auch schon.

  • Die Antwort lautet möglicherweise "gar nicht, es wird einfach auf alle Scrollbalken angewendet". Ist aber nur geraten, genaueres sollte die Doku des jQuery-Plugins verraten.

    Genau und in der Doku steht folgendes:

    "Then you can use any query selector to select the elements you would like to apply jScrollPane and then initialise it. The following code runs when the document is ready and finds any element with a class of "scroll-pane" and then calls jScrollPane on them."

    Die textarea hab ich dann auch mit der Klasse scroll-pane versehen aber der Effekt haut dennoch nicht hin.

  • Zitat

    The following code runs when the document is ready and finds any element with a class of "scroll-pane" and then calls jScrollPane on them.

    Hast Du denn dann nicht nur dem Textarea die Klasse gegeben, sondern den erwähnten Code auch irgendwo im Header oder in einer eigenen JS-Datei eingebunden?

  • Hast Du denn dann nicht nur dem Textarea die Klasse gegeben, sondern den erwähnten Code auch irgendwo im Header oder in einer eigenen JS-Datei eingebunden?


    Hab ich und dennoch hat es nicht funktioniert aber um das ganze zu vereinfachen, habe ich mal das Basic scrollbars Beispiel nachgebaut und es in der selben Datei dabei versucht auf die textarea anzuwenden aber es klappt nicht.

    Hier die Dateien zum ausprobieren:
    Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

  • Ich hab mir jetzt nur mal die Online-Demo angeschaut. Mögliche Fehlerquellen, die mir auffallen:

    - Liegen die JS-Dateien im richtigen Ordner (absolute Angabe des Ordners ist besser als nur Unterordner "scripts")? Zeigt der Browser JS-Fehler an?
    - Hat das textarea einen Style overflow: auto? Siehe Beschreibung des Plugins: "jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style."

    ...

    Ok, ich war neugierig und hab mir die Datei doch mal angeschaut. Wie es aussieht scheint das Plugin nicht für Formularelemente geeignet zu sein. Ich hab Dein Beispiel mal berichtigt (eindeutige ID vergeben) und es auch mit obverflow: auto probiert, aber dann konnte man in dem Textarea gar nicht mehr scrollen.

    Andererseits: Im Textarea kannst Du doch sowieso schon scrollen. Geht es Dir nur um die Gestaltung? Ich glaube, an der kannst Du nicht wirklich etwas ändern, es sei denn, Du verwendest IE-spezifische CSS-Befehle. Die versteht dann aber kein anderer Browser, und ich bin auch nicht sicher, ob es das in IE8 noch gibt.

  • Wie es aussieht scheint das Plugin nicht für Formularelemente geeignet zu sein. Ich hab Dein Beispiel mal berichtigt (eindeutige ID vergeben) und es auch mit obverflow: auto probiert, aber dann konnte man in dem Textarea gar nicht mehr scrollen.

    Andererseits: Im Textarea kannst Du doch sowieso schon scrollen. Geht es Dir nur um die Gestaltung?


    Korrekt, mir geht es in meinem Vorhaben nur um die Gestaltung.


    Außerdem kann man das Plugin schon auf die textarea anwenden und zwar schreibt der Autor wie es funktioniert dazu folgendes:

    Zitat

    In the case of a TEXTAREA you can fake it by making the text area full height and placing it inside a div you have applied jScrollPane too

    Zitat

    Basically you make the text area as tall as the text in it. You then put that textarea inside a div with the fixed height you want and you apply jScrollPane to that div.

    Nur weiß ich nicht, wie ich das genau machen soll?

  • Hm, ok, das könnte sogar klappen. Das Prinzip ist dann wohl dieses: Du hast das Textarea und darum ein div. Das div kriegt die Scrolleiste per jQuery. Das Textarea musst Du dann dazu bringen, selber keine Scrolleiste anzuzeigen. Ist jetzt aber die Frage, wie man das anstellen soll. Wenn die Länge des eingebbaren Textes begrenzt ist, kann man das vielleicht raten und eine feste Höhe setzen. Wenn nicht, wird es aber schwierig. Ich bin nicht sicher, ob das mit overflow: visible am Textarea gut aussieht. Vielleicht wenn Du dem umschließenden div die gleiche Hintergrundfarbe gibst, so dass nicht auffällt, dass der Inhalt über den Rand des Textareas rausläuft. Müsstest Du mal etwas ausprobieren.

Jetzt mitmachen!

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