La position de la poignée du curseur JQuery() ne fonctionne pas

J'ai une div qui affiche la valeur actuelle du curseur et la div se déplace avec la position du curseur.La position de la poignée du curseur JQuery() ne fonctionne pas

Sur la base de la réponse à Using offset and jQuery slider

je suis venu avec le code suivant:

function SliderSetup() 
{ 
    $("#slider").slider({ 
      value:0, 
      min: -10, 
      max: 10, 
      step: 2, 
      animate:false, 
      slide: function(event, ui) { 
       setTimeout(showVal, 10); 
      } 
     }); 

    $("#slider").slider("value", 0); 
    showVal(); //setTimeout(showVal, 10) does not work either 
} 

function showVal() { 

var position = $('.ui-slider-handle:first').position(); //i tried offset()-didnt work 
var value = $('#slider').slider('value'); 
$('#value1').text(value).css({'left':position.left}); 
}

La position div est correcte lorsque l'utilisateur utilise le curseur, mais par défaut la valeur est dans le position correcte. Capture d'écran ci-dessous

alt text http://i45.tinypic.com/t4tr9f.jpg

Edit: (? Largeur initiale de l'élément de valeur) Markup

       <tr> 
            <td width="30%"> 
             <h2> 
              Select Value</h2> 
            </td> 
            <td width="60%"> 
             <div id="value1">&nbsp;</div> 
             <div id="slider"> 
             </div> 
            </td> 
            <td> 
             <div id="myDiv"> 
             </div> 
            </td> 
           </tr>

Source

2010-03-07 DotnetDude

+1 Pour prendre une suggestion et d'essayer honnêtement de le faire fonctionner, pas copier/coller quelque chose là-bas et de vivre avec elle. –

Je pense qu'il ya un problème avec votre balisage, ou le tir pas après les éléments sont prêts. Dans tous les cas, voici un échantillon de travail complet:

<html> 
    <head>  
    <title>Test</title> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> 
    <style type="text/css"> 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     function SliderSetup() 
     { 
      $("#slider").slider({ 
        value:0, 
        min: -10, 
        max: 10, 
        step: 2, 
        animate:false, 
        slide: function(event, ui) { 
         setTimeout(showVal, 10); 
        } 
       });  
      $("#slider").slider("value", 0); 
      showVal(); 
     } 
     function showVal() { 
     var slider = $('.ui-slider-handle:first'); 
     var position = slider.offset(); 
     var value = $('#slider').slider('value'); 
     var val = $('#value1'); 
     val.text(value).css({'left':position.left + ((slider.width() - val.width()) /2), 'top':position.top -20 }); 
     }  
     $(function(){ 
     SliderSetup(); 
     }); 
    </script> 
    </head> 
    <body> 
    <br/><br/><br/> 
    <div id="value1" style="position: absolute"></div> 
    <div id="slider"></div> 
    </body> 
</html>

Le code de très espacées, je l'espère pour vous aider à trouver le problème plus rapidement. Les changements de css sont juste moi centrant la valeur sur le curseur plus précisément, changer à la position que vous voulez que ce soit dans bien sûr. Pour vérifier la largeur de votre élément de valeur, essayez de définir ce css, qui peut être votre seul problème, ne peut pas être certain sans voir le balisage:

#value1 { border: solid 1px red; }

Source

2010-03-07 18:54:30

@Nick - Je ne peux toujours pas trouver la bonne position. J'ai mis à jour mon message avec le balisage. L'attribut width peut être à l'origine du problème? – DotnetDude

Pas besoin de codage floue. Le ui a un handle qui a un offsetLeft et un offsetTop.

Ceci est tout ce que vous devez:

var posLeft = ui.handle.offsetLeft;

Source

2015-09-15 11:25:40 Jochem

La position de la poignée du curseur JQuery() ne fonctionne pas

Répondre

Questions connexes