Le curseur de jquery verticalement ne fonctionne pas

salut j'ai fait un curseur vertical en utilisant le jquery pour faire glisser le texte verticalement. Le texte se déplace de haut en bas lorsque la poignée du curseur est déplacée mais la poignée elle-même ne bouge pas ... je ne sais pas ce qui se passe là-bas ??Le curseur de jquery verticalement ne fonctionne pas

S'il vous plaît, aidez-moi!

Voici le code:

JS:

$(document).ready(function(){ 
    $("#content-slider").slider({ 
    animate: true, 
     orientation: "vertical", 
     value: 100, 
    change: handleSliderChange, 
    slide: handleSliderSlide 
    }); 

}); 

function handleSliderChange(e, ui) 
{ 
    var maxScroll = $("#content-scroll").attr("scrollHeight") - $ 
("#content-scroll").height(); 
    $("#content-scroll").animate({scrollTop: ui.value * (maxScroll/
100) }, 1000); 

} 

function handleSliderSlide(e, ui) 
{ 
    var maxScroll = $("#content-scroll").attr("scrollHeight") - $ 
("#content-scroll").height(); 
    $("#content-scroll").attr({scrollTop: ui.value * (maxScroll/
100) }); 
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script> 
    <script src="jquery-ui-1.7.1.custom.min.js" language="javascript" type="text/javascript"></script> 
    <script src="slider_test.js" language="javascript" type="text/javascript"></script> 
    <style> 
    #main { 
     width: 510px; 
     margin: 0 auto; 
    } 

    #content-slider { 
     width:4px; 
     height:510px; 
     margin: 5px;float:left; 
     background: #BBBBBB; 

    } 

    .ui-slider-handle { 
     float:left; 
     height:10px;width:10px; 
     background-color:#03F; 
} 

    #content-scroll { 
     width: 500px; 
     height: 500px; 
     margin-top: 10px; 
     overflow: hidden; 
     border: solid 1px black; 
    float:left; 
    } 

    #content-holder { 
     width: 800px; 
     height: 270px; 
    } 

    .content-item { 
     width: 490px; 
     height: 270px; 
     padding: 5px; 
     float: left; 
    margin:auto 0 0 100px; 
    } 
    </style> 
</head> 
<body> 
<div id="content-slider"></div> 
<div id="content-scroll"> 
    <div id="content-holder"> 
    <div class="content-item"> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
    </div> 
    </div> 


    </div> 
</div> 
</body> 
</html>

Source

2010-03-04 samar

Cela devrait faire l'affaire:

$(document).ready(function(){ 
     $("#content-slider").slider({ 
     animate: true, 
      orientation: "vertical", 
      value: 0, 
      range: "max", 
      min: -100, 
      max: 0, 
     change: handleSliderChange, 
     slide: handleSliderSlide 
     }); 

    }); 

    function handleSliderChange(e, ui) 
    { 
     var maxScroll = $("#content-scroll").attr("scrollHeight") - $ 
    ("#content-scroll").height(); 
     $("#content-scroll").animate({scrollTop: ui.value * (maxScroll/
    -100) }, 1000); 

    } 

    function handleSliderSlide(e, ui) 
    { 
     var maxScroll = $("#content-scroll").attr("scrollHeight") - $ 
    ("#content-scroll").height(); 
     $("#content-scroll").attr({scrollTop: ui.value * (maxScroll/
    -100) }); 
    }

Source

2010-03-05 00:25:48 ssergei

Le curseur de jquery verticalement ne fonctionne pas

Répondre

Questions connexes