scrollbar mit jquery

susiH · 26.09.2011

hi leute,

ich versuche gerade eine jquery scrollbar auf meiner seite einzubauen... ohne erfolg

die scrollbar wird zwar angezeigt hat aber keinerlei funktion

hier mal ein link zu der seite:

das ist der die dazugehörige css

HTML:

/*---- SCROLLBAR ------*/

#mcs_container
{
    position:relative; 
    width:1000px; 
    height:600px; 
    }
    
#mcs_container .customScrollBox
    {
    position:relative; 
    height:100%; 
    overflow:hidden;
    }
    
#mcs_container .customScrollBox .container
    {
    position:relative; 
    width:928px; 
    top:0; 
    float:left;
    }
    
#mcs_container .customScrollBox .content
    {
    clear:both;
    }
#mcs_container .customScrollBox .content p
    {padding:0 5px; 
    margin:10px 0; 
    color:#fff;
    }
#mcs_container .dragger_container
    {
    position:relative; 
    width:1px; 
    height:600px; 
    float:left; 
    margin: 50px 0 0 10px; 
    background:#000; 
    cursor:pointer -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; cursor:s-resize;
    z-index:1000;
    }
#mcs_container .dragger
    {position:absolute; 
    width:7px; 
    height:60px; 
    background:#999; 
    text-align:center; 
    line-height:60px; 
    color:#cad700; 
    overflow:hidden; 
    cursor:pointer; 
    -moz-border-radius:2px; 
    -khtml-border-radius:2px; 
    -webkit-border-radius:2px; 
    z-index:1000;
    }
#mcs_container .dragger_pressed
    {
    position:absolute; 
    width:4px; margin-left:-1px; 
    height:60px; background:#999; 
    color:#666; 
    overflow:hidden; 
    -moz-border-radius:4px; 
    -khtml-border-radius:4px; 
    -webkit-border-radius:4px; 
    border-radius:4px; 
    cursor:s-resize;}

so habe ich es im kopf eingebunden

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.js"></script>
<script language="JavaScript" type="text/javascript">
$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}
</script>

<script language="JavaScript" type="text/javascript">

function LadeInfo() {
if (document.getElementById) {  
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) {  
document.hidepage.visibility = 'hidden';
}
else {  
document.all.hidepage.style.visibility = 'hidden';
      }
   }
}
</script>

und in diesem bereich soll es scrollen

HTML:

<div id="mcs_container">
    <div class="customScrollBox">
        <div class="container">
            <div class="content">
            
          <p><div class="deutsch">
Kurzer Lebenslauf <br />
<div class="trenner"><img src="http://www.psd-tutorials.de/forum/images/trenner.png" alt="" /></div><br />
        </div></p>
 
        <p><div class="englisch">
short résumé<br />
<div class="trenner"><img src="http://www.psd-tutorials.de/forum/images/trenner.png" alt="" /></div><br />
                        </div></p>
                        
</div>
</div>
<div class="dragger_container">
 <a style="display: inline-block;" href="#" class="scrollUpBtn"></a> <a style="display: inline-block;" href="#" class="scrollDownBtn"></a>
<div class="dragger"></div>
</div>
</div>
</div>

ich denke eigentlich, dass oben im kopf irgendwas falsch ist.
aber da ich des javascripts nicht sehr mächtig bin, kann ich da keinen fehler finden.

danke euch schonmal

Duddle · 26.09.2011

AW: scrollbar mit jquery

Du hast den letzten Schritt in der Anleitung übersehen: du musst die Hauptfunktion irgendwann vor Ende des <body> aufrufen.

HTML:

<script>
	$(window).load(function() {  $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
	});
</script>
<script src="jquery.mCustomScrollbar.js" type="text/javascript"></script>

Die Parameter werden im verlinkten Blog beschrieben.

Bei mir verhält sich die Scrollbar aber sehr seltsam. Ich vermute den Grund darin, dass dein Inhalt exakt auf meinen Bildschirm passt; nur die letzte Zeile wird von dem Bild überblendet. Abgesehen davon funktioniert es aber, wenn du o.g. Code einfügst.

Übrigens ist dein Quellcode äusserst verbesserungwürdig. Deine Methode, die beiden Spalten zu erzeugen ist ... kreativ, sicher, aber nicht wirklich schick. Gleiches gilt für das Hover-Menü. Aber egal, das war ja nicht deine Frage

Duddle

susiH · 27.09.2011

AW: scrollbar mit jquery

danke dir... zumindestens ist sie jetzt aktiv

aber es wird in die falsche richtung gescrollt. hast du vielleicht ne ahnung, woran das liegen könnte?

Duddle · 27.09.2011

AW: scrollbar mit jquery

susiH schrieb:
aber es wird in die falsche richtung gescrollt. hast du vielleicht ne ahnung, woran das liegen könnte?

Duddle schrieb:
Bei mir verhält sich die Scrollbar aber sehr seltsam. Ich vermute den Grund darin, dass dein Inhalt exakt auf meinen Bildschirm passt; nur die letzte Zeile wird von dem Bild überblendet.

Du könntest notfalls auch ein anderes PlugIn suchen. Hier im Unterforum war vor ein paar Tagen eine ähnliche Diskussion.

Duddle