0

I’m new to jQuery and javascript.

I’m working on a numeric rectangle. When the user clicks the gray arrow on the right, they can drag the rectangle to any number. The left arrow does the same.

I have a function so that the right arrow can never be at the same position as the left one.

So far this is fine, but the user can move the arrow wherever they want. I would like it so that if the user moves the arrow, the arrow takes the nearest place to a number on the rectangle.

I trigger the event on mouseup, and now i have the distance. Even so. For example, if the user moves the right arrow and puts it between 7 & 8, is there some way to move the arrow to the closest number?

This is because in the gray square I put the result of the distance between the left and right arrows.

HTML:

<body>
    <div class="modal">
        <div style="position:fixed; width:100%; height:80px; background-color:#1a3751">
        <span id="logo"></span><span class="titulo">Tira num&eacute;rica</span>
        </div>
        <table width="100%" height="100%" style="width:100%; height:100%" cellpadding="0" cellspacing="0">
            <tr><td align="center" valign="middle" style="text-align:center; vertical-align:middle;">
            <center>
                    <table cellpadding="0" cellspacing="0"><tr>
                        <td><button type="button" id="cmdMenos"><</button></td>
                        <td>
                            <div class="panel" style="">
                                <div id="contenedorLinea" style="white-space:nowrap; position:relative"></div>
                                <div id="regleta" style="">
                                    <div id="flechaIzq"></div><div id="contador"><div id="lblContador"></div></div><div id="flechaDer"></div>
                                </div>
                            </div>
                        </td>
                        <td><button type="button" id="cmdMas">></button></td>
                    </tr></table>
                </center>
            </td></tr></table>
        </div>
    </div>
</body

Javascript:

var nMax = 100;
var nMin = 0;
var offset = 0;

function initLinea(){
$('#contenedorLinea').empty();

for (i=nMin; i<=nMax; i++)
{
    if ( i % 2 == 0 )
        var aux = $('<div class="num par" data-val="'+i+'">'+i+'</div>');   
    else
        var aux = $('<div class="num non" data-val="'+i+'">'+i+'</div>');   
    $('#contenedorLinea').append( aux );
}
$('#regleta').width(5765);}

function updateOffset(){
$('.panel').scrollLeft( offset );
}

  $(document).ready(function () {
$('#cmdMenos').click(function(){
    offset -= 60;
    updateOffset();
});

$('#cmdMas').click(function(){
    offset += 60;
    updateOffset();
});



var dragging = false;
var lastPosition;
var clicked;

$('#flechaDer').mousedown(function(e){
    dragging = true;
    lastPosition = e.pageX;
    clicked=true;
});

$('#flechaIzq').mousedown(function(e){
    dragging = true;
    lastPosition = e.pageX;
    clicked=false;

});

$(document).mouseup(function(e){
    dragging = false;
});

  $('#regleta').mouseup(function(e){
     var contadorWidth = Math.floor(($('#contador').width()+17)/57);
      $('#lblContador').html(contadorWidth);
   });


$('#regleta').mousemove(function(e){
    if(dragging == false) return;
    var change= -(lastPosition-e.pageX);
    lastPosition= e.pageX;

    if (clicked == true) { //Si se da click a la flecha derecha 
        if( $('#contador').width() +change < 63 ){ //Si el ancho del contador +change es menor a 63 no se despliega nada
            return false;
        }
        else{//De otro modo aumenta el ancho del contador
            $('#contador').css({'width': '+='+change})
              $(this).css({'width' : $(this).width()  * 1.1});
        }
    }   
    if (clicked == false){//Si se da click a la flecha izquierda
        if(e.pageX < 85){; //Si la posición x es menor a 85 no despliega nada
            return false
        }
        else {
            $('#flechaIzq').css({'margin-left':'+=' +change})// De otro modo aumenta el margen de la flecha izquierda
        }   
    }
});





    //window.captureEvents(Event.CLICK);
    //window.onclick= displayCoords;
    //function displayCoords(e) {
    //
    //}
$('div.panel').css('width', ($(document).width()-160)+'px');
initLinea();

$(".volver").on('click',function(){ document.location.href = '../'; });
 });

Demo in JS Fiddle Updated

Ame
  • 1
  • 3
  • @Anne. Your code should be *here*, on Stack Overflow, not on some external service. Please [edit] your question to add the code to it. Use the code formatting button at the top of the edit window to ensure your code shows up correctly. – TRiG Mar 05 '14 at 17:51
  • (I was going to do it for you, but you've linked to some sort of "collaborative edit" mode, rather than the normal mode, and it looks like other people might be changing your code, so I'm not sure that the code currently there is the code you want. So it's best if you [edit] the code into this question yourself.) – TRiG Mar 05 '14 at 17:56
  • Thanks, i just added the code here, and this is the jsfiddle in normal mode, tks ;) http://jsfiddle.net/9Abc7/ – Ame Mar 05 '14 at 18:12
  • Hi @Anne. Thanks for that. I've tidied the English in your question. I also rewrote the title, and I *think* I did it correctly. – TRiG Mar 05 '14 at 19:08
  • Yes you did thanks a lot for your help. :D I've been making somes changes on my code, so should I edit my question or put in another answer? – Ame Mar 05 '14 at 19:18
  • You've got no answers yet, so feel free to change your code. (Edits which would invalidate existing answers are a bad idea; so are edits which would completely change a question beyond recognition.) For further questions about site policy, see [meta]. – TRiG Mar 05 '14 at 19:20

0 Answers0