1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Eigener Scrollbalken in der Textarea

Dieses Thema im Forum "Design" wurde erstellt von Press Play, 7. Juni 2010.

  1. Press Play

    Press Play Well-Known Member

    Registriert seit:
    11. April 2010
    Beiträge:
    52
    Zustimmungen:
    0
    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:

    <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" />


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

    Ammaletu Well-Known Member
    Ehrenmitglied

    Registriert seit:
    14. Juli 2007
    Beiträge:
    4.696
    Zustimmungen:
    0
    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.
     
  3. Press Play

    Press Play Well-Known Member

    Registriert seit:
    11. April 2010
    Beiträge:
    52
    Zustimmungen:
    0
    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.
     
  4. Ammaletu

    Ammaletu Well-Known Member
    Ehrenmitglied

    Registriert seit:
    14. Juli 2007
    Beiträge:
    4.696
    Zustimmungen:
    0
    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?
     
  5. Press Play

    Press Play Well-Known Member

    Registriert seit:
    11. April 2010
    Beiträge:
    52
    Zustimmungen:
    0
    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:
    Den Anhang 3888 betrachten
     
  6. Ammaletu

    Ammaletu Well-Known Member
    Ehrenmitglied

    Registriert seit:
    14. Juli 2007
    Beiträge:
    4.696
    Zustimmungen:
    0
    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.
     
  7. Press Play

    Press Play Well-Known Member

    Registriert seit:
    11. April 2010
    Beiträge:
    52
    Zustimmungen:
    0
    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:

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

    Ammaletu Well-Known Member
    Ehrenmitglied

    Registriert seit:
    14. Juli 2007
    Beiträge:
    4.696
    Zustimmungen:
    0
    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.
     
  9. mcca

    mcca Well-Known Member

    Registriert seit:
    17. August 2010
    Beiträge:
    111
    Zustimmungen:
    0
    Hallo leute
    bei mir klappt das einfach nicht :confused:
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden