Anzeige

scrollbar mit jquery

scrollbar mit jquery | PSD-Tutorials.de

Erstellt von susiH, 26.09.2011.

  1. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    scrollbar mit jquery
    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:
    http://susi.artmessengers.de/uebermich.html

    das ist der die dazugehörige css
    HTML:
    1. /*---- SCROLLBAR ------*/
    2.  
    3. #mcs_container
    4. {
    5.     position:relative;
    6.     width:1000px;
    7.     height:600px;
    8.     }
    9.    
    10. #mcs_container .customScrollBox
    11.     {
    12.     position:relative;
    13.     height:100%;
    14.     overflow:hidden;
    15.     }
    16.    
    17. #mcs_container .customScrollBox .container
    18.     {
    19.     position:relative;
    20.     width:928px;
    21.     top:0;
    22.     float:left;
    23.     }
    24.    
    25. #mcs_container .customScrollBox .content
    26.     {
    27.     clear:both;
    28.     }
    29. #mcs_container .customScrollBox .content p
    30.     {padding:0 5px;
    31.     margin:10px 0;
    32.     color:#fff;
    33.     }
    34. #mcs_container .dragger_container
    35.     {
    36.     position:relative;
    37.     width:1px;
    38.     height:600px;
    39.     float:left;
    40.     margin: 50px 0 0 10px;
    41.     background:#000;
    42.     cursor:pointer -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; cursor:s-resize;
    43.     z-index:1000;
    44.     }
    45. #mcs_container .dragger
    46.     {position:absolute;
    47.     width:7px;
    48.     height:60px;
    49.     background:#999;
    50.     text-align:center;
    51.     line-height:60px;
    52.     color:#cad700;
    53.     overflow:hidden;
    54.     cursor:pointer;
    55.     -moz-border-radius:2px;
    56.     -khtml-border-radius:2px;
    57.     -webkit-border-radius:2px;
    58.     z-index:1000;
    59.     }
    60. #mcs_container .dragger_pressed
    61.     {
    62.     position:absolute;
    63.     width:4px; margin-left:-1px;
    64.     height:60px; background:#999;
    65.     color:#666;
    66.     overflow:hidden;
    67.     -moz-border-radius:4px;
    68.     -khtml-border-radius:4px;
    69.     -webkit-border-radius:4px;
    70.     border-radius:4px;
    71.     cursor:s-resize;}
    so habe ich es im kopf eingebunden
    HTML:
    1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    2. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    3. <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    4. <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    5. <script type="text/javascript" src="js/jquery.mCustomScrollbar.js"></script>
    6. <script language="JavaScript" type="text/javascript">
    7. $.fx.prototype.cur = function(){
    8.     if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
    9.      return this.elem[ this.prop ];
    10.     }
    11.     var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    12.     return typeof r == 'undefined' ? 0 : r;
    13. }
    14.  
    15. <script language="JavaScript" type="text/javascript">
    16.  
    17. function LadeInfo() {
    18. if (document.getElementById) {  
    19. document.getElementById('hidepage').style.visibility = 'hidden';
    20. }
    21. else {
    22. if (document.layers) {  
    23. document.hidepage.visibility = 'hidden';
    24. }
    25. else {  
    26. document.all.hidepage.style.visibility = 'hidden';
    27.       }
    28.    }
    29. }
    30.  
    und in diesem bereich soll es scrollen
    HTML:
    1. <div id="mcs_container">
    2.     <div class="customScrollBox">
    3.         <div class="container">
    4.             <div class="content">
    5.            
    6.           <p><div class="deutsch">
    7. Kurzer Lebenslauf <br />
    8. <div class="trenner"><img src="http://www.psd-tutorials.de/forum/images/trenner.png" alt="" /></div><br />
    9.         </div></p>
    10.  
    11.         <p><div class="englisch">
    12. short résumé<br />
    13. <div class="trenner"><img src="http://www.psd-tutorials.de/forum/images/trenner.png" alt="" /></div><br />
    14.                         </div></p>
    15.                        
    16. </div>
    17. </div>
    18. <div class="dragger_container">
    19.  <a style="display: inline-block;" href="#" class="scrollUpBtn"></a> <a style="display: inline-block;" href="#" class="scrollDownBtn"></a>
    20. <div class="dragger"></div>
    21. </div>
    22. </div>
    23. </div>                        
    24.  
    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
     
    Zuletzt bearbeitet: 26.09.2011
    #1      
  2. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    scrollbar mit jquery
    AW: scrollbar mit jquery

    Du hast den letzten Schritt in der Anleitung übersehen: du musst die Hauptfunktion irgendwann vor Ende des <body> aufrufen.
    HTML:
    1.  
    2.     $(window).load(function() {  $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
    3.     });
    4. <script src="jquery.mCustomScrollbar.js" type="text/javascript"></script>
    5.  
    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
     
    #2      
  3. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    scrollbar mit jquery
    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?
     
    #3      
  4. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    scrollbar mit jquery
    AW: scrollbar mit jquery

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



    Duddle
     
    #4      
x
×
×