Perfect-Scrollbar (jquery) bei textareas im Firefox

JayJay87 · 02.04.2014

Hallo erstmal!

ja ich hab da wieder mal n problem...und zwar haben sich schon mehrere die zähne daran ausgebissen,aber vielleicht hat hier ja jemand eine lösung für das problem....also zu meinem problem...seid dem neuen firefox-update kann man ja die scrollbar nicht mehr mit css stylen,sondern ja nur noch über js....dann haben wir uns ein jquery-plugin raus gesucht das sich perfect-scrollbar nennt,aber dieses ist irgendwie nicht auf den scrollbalken in einer textarea anwendbar.
hättet ihr da ne lösung parat??? muss ein anderes plugin her? oder ist ein fehler im code? oder muss im code noch was ergänzt werden???

lg jenny
http://jsfiddle.net/eFH8h/
http://jsfiddle.net/eFH8h/

lachender_engel · 02.04.2014

Poste mal einen Soll-Ist-Screenshot, dann können wir sicher besser verstehen was Du möchtest.

JayJay87 · 02.04.2014

das ist die demo von dem plug-in.....also so würden wir das gern für ne textarea haben wollen

JayJay87 · 02.04.2014

also die scrollbar sieht halt so aus wie die ,die bei facebook in den rechten feldern zu sehen ist

lachender_engel · 02.04.2014

Noch mal: Mache ein Soll-Ist-Screenshot und lade es hoch. Sicher wirst Du hier mehr Antworten bekommen, wenn sich die Leute hier die Informationen nicht zusammen suchen müssen.
Mache zwei Bilder: auf dem einen sehen wir, wie es ohne das Plugin aussieht, auf dem anderen wie es aussehen soll. Und schon wissen wir, was Du möchtest.

JayJay87 · 02.04.2014

ich weiß zwar nicht was das fürn unterschied macht...da ich 2 links hier schon gepostet habe...und zwar is beim ersten link von jsfiddle zu sehen wie es nicht funktioniert...und beim 2 link wie es aussehen soll...wo ist jetzt der unterschied zwischen den links und den links die zu meinem screenshot führen??naja aber da ist ein bild

radiothek · 03.04.2014

Hallo,

wenn ich Deinen Code aus dem fiddle direkt in ein HTML-Dokument stecke funktioniert soweit das die gewünschte Scrollbar erscheint, sobald ich mit der Maus in den Bereich komme wo üblicherweise ein Scrollbar ist.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="src/perfect-scrollbar.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="src/jquery.mousewheel.js"></script>
    <script src="src/perfect-scrollbar.js"></script>
    <style>
        * {
            -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
            -moz-box-sizing: border-box;    /* Firefox, other Gecko */
            box-sizing: border-box;         /* Opera/IE 8+ */
        }
        textarea {
            display: block;
            height: 100%;
            width: 142px;
            border: none;
            margin-bottom: 8px;
            padding: 0;
            resize: none;
            overflow-y: hidden; /* fixes scrollbar flash - kudos to @brettjonesdev */
            border:1px solid red;
        }
        div {
            width: 150px;
            height: 150px;
            position: relative;
            margin: 0px auto;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script>
        $(function() {
            $('div').perfectScrollbar();
            $('div').on('keyup','textarea',function(){
                $(this).height(0).height( this.scrollHeight );
                $('div').scrollTop($(this).outerHeight());
                $('div').perfectScrollbar('update');
            });
            $('div').find( 'textarea' ).keyup();
        });
    </script>
</head>
<body>
    <div>
    <textarea>Enthusiastically leverage other's team driven catalysts for change vis-a-vis virtual schemas. Completely incentivize accurate users via one-to-one initiatives. Credibly engage leading-edge technology after multidisciplinary niche markets. Dramatically foster strategic users via cost effective data. Distinctively plagiarize client-focused expertise with intermandated systems.</textarea>
 
</div>
</body>
</html>

Sind alle Dateien korrekt eingebunden? Meldet Firebug irgendwelche Fehler?

Edit: In Deinem fiddle führen die Links zur perfect-scrollbar ins Leere bzw zu einem 404.

JayJay87 · 03.04.2014

also ich hab nochmal überprüft...aber jetzt so auf anhieb keinen Fehler entdecken können...aber der firebug sagt tatsächlich was....ja ich wollte bei fiddle demonstrieren wie ichs gecodet hab....eig hab ich dreamweaver benutzt zum coden.

Die Fehlermeldung von Firebug...und tut mir leid wenn das gestern n bisschen zickig rüberkam war nur etwas genervt ,weil ich schon seit 2 tagen versuche das prob zu lösen

Myhar · 03.04.2014

Wenn dir gesagt wird, dass jQuery nicht definiert ist, dann musst du es natürlich erst einbinden, damit es funktioniert.

JayJay87 · 03.04.2014

aber ich hab doch jquery eingebunden

Myhar · 03.04.2014

Du denkst eventuell nur, dass du jQuery eingebunden hast. Bzw. hast du es eventuell inkorrekt eingebunden. Es ist nämlich wichtig, wo und in welcher Reihenfolge Skripte eingebunden werden.
Bindest du jQuery vor allen anderen Skripten ein?. Greifst du auf jQuery zu bevor es geladen wurde? Für mich sieht es so aus, als ob du jQuery verwendest beovr es eingebunden wird, genauer kann man das ohne Code jedoch nicht feststellen.

JayJay87 · 03.04.2014

ich habs genauso eingebunden wie radiothek....code kommt gleich ein mom..

JayJay87 · 03.04.2014

Code:

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javacript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="perfect-scrollbar-master/src/perfect-scrollbar.css" />
<script type="text/javacript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="perfect-scrollbar-master/src/jquery.mousewheel.js"></script>
<script src="perfect-scrollbar-master/src/perfect-scrollbar.js"></script>


<style>

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;  }
   
textarea {
    display: block;
    height: 100%;
    width: 142px;
    border: none;
    margin-bottom: 8px;
    padding: 0;
    resize: none;
    overflow-y: hidden;}
   
div {
    width: 150px;
    height: 150px;
    position: relative;
    margin: 0px auto;
    padding: 0px;
    overflow: hidden;
}

</style>

<script type="text/javascript">
      $(function() {
            $('div').perfectScrollbar();
            $('div').on('keyup','textarea',function(){
                $(this).height(0).height( this.scrollHeight );
                $('div').scrollTop($(this).outerHeight());
                $('div').perfectScrollbar('update');
            });
            $('div').find( 'textarea' ).keyup();
        });
       

    </script>
       

<title>Unbenanntes Dokument</title>
</head>

<body>

<div>
<textarea>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
</textarea>
</div>

</body>
</html>

Myhar · 03.04.2014

JayJay87 schrieb:
<script type="text/javacript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="perfect-scrollbar-master/src/perfect-scrollbar.css" />
<script type="text/javacript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Warum bindest du jQuery zweimal ein? Auch muss es javascript heißen damit es funktioniert, bzw. kannst du den type auch weglassen.

JayJay87 · 03.04.2014

oh nein

....wie peinlich :oops:

JayJay87 · 03.04.2014

also ich hab den type jetzt entfernt....und die 2te jquery einbindung weg genommen,aber es scheint immernoch irgendwie an der falschen stelle zu sitzen

radiothek · 03.04.2014

Hast Du hier auch das fehlende S ergänzt?

Code:

<script type="text/javaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Myhar · 03.04.2014

Wieso sollte sie hier (ich nehme an du meinst das s in https) das s einfügen?

JayJay87 · 03.04.2014

also ich habe type jetzt weggelassen und http: sagte firebug sollte ich auch weglassen

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

radiothek · 03.04.2014

Teste mal diesen Header, mit dem ist es bei mir erfolgreich. Schau nur mal ob die Pfade zu den JS/CSS Dateien der perfect-scrollbar passen.

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="perfect-scrollbar-master/src/perfect-scrollbar.css" rel="stylesheet"/>
<script src="perfect-scrollbar-master/src/jquery.mousewheel.js"></script>
<script src="perfect-scrollbar-master/src/perfect-scrollbar.js"></script>