[SOLUCIONADO] ¿Cómo hacer transform:translate con puro javascript?

berkeleyPunk · #1 (**permalink**) 15/02/2014, 17:43

Buen día.

La idea es emular en javascript el transform:translate de CSS.

Googleando, me encontré con esta página.

Aquí se halla un script que hace casi exactamente lo que pretendo.

La función de dicho script cuenta con un argumento. Pero resulta que mis necesidades requieren que la función no necesite argumentos.

Entonces, modifiqué dicho script anidando 2 funciones, pero no logro que funcione.

Código HTML:

Ver original<body onload="mover()">
 
  <div id="capa">DIV</div>
 
</body>

Código CSS:

Ver original#capa {
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
    background-color:black;
    color:white;
}

Código Javascript:

Ver originalfunction mover()
    {
        function x(pixelInicial)
        {
            pixelInicial = pixelInicial + 1;
      
            if (pixelInicial != 200)
            {
                document.getElementById("capa").style.top = pixelInicial + "px";
                setTimeout( "x(" + pixelInicial + ")", 10 );
            }
        }
        
        return x(0);
    }

¿Qué modificamos para que funcione?

Saludos cordiales.

Alexis88 · #2 (**permalink**) 15/02/2014, 22:10

Viendo el ejemplo en la página que dejaste, hice algo distinto:

Código HTML:

Ver original<div id = "capa"></div>
<button id = "ar">Arriba</button>
<button id = "ab">Abajo</button>
<button id = "iz">Izquierda</button>
<button id = "de">Derecha</button>

Código CSS:

Ver original#capa{
    position: absolute;
    background: radial-gradient(ellipse, white, yellow);
    width: 50px;
    height: 50px;
    margin-top: 5em;
    border: .1em #aa0 solid;
}

Código Javascript:

Ver originalvar div = document.getElementById("capa");
 
window.addEventListener("click", function(e){
    switch(e.target.id){
        case "ar":
            div.style.top -= 2;  
        break;
      
        case "ab":
            div.style.bottom -= 2;
        break;
      
        case "iz":
            div.style.left -= 2;  
        break;
      
        case "de":
            div.style.right -= 2;
        break;
    }
}, false);

De este modo, cada vez que de un clic, tomo el Id del elemento al que se le dio el clic (target = elemento objetivo) y según el Id, muevo el Div hacia una dirección en particular. Te dejo otra opción para hacerlo, utilizando el método animate de jQuery:

Código Javascript:

Ver original$(window).click(function(e){
    switch (e.target.id){
        case "ar":
            $("#capa").animate({top: "-=5em"}, 300);
        break;
        
        case "ab":
            $("#capa").animate({top: "+=5em"}, 300);
        break;
        
        case "iz":
            $("#capa").animate({left: "-=5em"}, 300);
        break;
        
        case "de":
            $("#capa").animate({left: "+=5em"}, 300);
        break;
    }
});

El resultado: http://jsbin.com/turiq/1

Saludos

berkeleyPunk · #3 (**permalink**) 16/02/2014, 09:56

Cita:

Iniciado por Alexis88

Viendo el ejemplo en la página que dejaste, hice algo distinto...

Gracias por responder, Alexis88.

Ayer en la noche, precisamente, después de cansarme de hacer que funcionara el JS, busqué la solución en jQuery, y la cosa funcionó.

Acerca del javascript que pones, no funciona

!

A tu código le añadí: + 'px'; a los número "2", que, imagino, representan los números de pixeles que ha de moverse el div. Por si acaso, encerré entre paréntesis cada uno de los casos. Añadí el default y todo lo metí dentro de window.onload= function(){...}

Y nada.

Saludos

PD. Por cierto, tu jQuery funciona bien.

Alexis88 · #4 (**permalink**) 16/02/2014, 12:45

Qué raro, lo probé localmente e iba bien, pero de cualquier forma, el segundo ejemplo con jQuery es el que te te recomiendo usar, al fin y al cabo es JavaScript también, aunque no sea nativo.

berkeleyPunk · #5 (**permalink**) 16/02/2014, 17:15

Perfecto, solucioné el problema con el jQuery.

Ordinariamente pondría el código con el que solucioné mi bronca. Pero como el maestro Alexis88 puso ya una alternativa en jQuery, pues no le muevo más.

Saludos y hasta luego.