[SOLUCIONADO] Función javascript sencilla no funciona por variable. Ay uda por favor

lovecom45 · #1 (**permalink**) 21/07/2013, 13:28

¡Hola compañer@s buen día!

Tengo un problemilla que no consigo resolver. Creé esta pequeña función sólo para mover una div que contiene otras div para que funcione junto con un menu como si fuera un iframe pero que este todo el contenido ya cargado en la página pero oculto gracias a overflow:hidden. El problema esta en que mediante una serie de link (menú) le paso a la variable el valor que se movera la div contenedora, este valor si lo recoje bien la función pero ya no sé como pasarselo a la instrucción que movería la capa.

Aquí la función js

Código HTML:

  <script language="javascript" type="text/javascript">
        function mover(elemento,pos) {
		var cantidad = pos + "px";
				document.getElementById(elemento).style.webkitTransform = "translate(100px,0)";
				document.getElementById(elemento).style.MozTransform = "translate('+cantidad+',0)";


        }
</script>

el menú

Código HTML:

<a href="#1" onClick="mover('mover','500')";> Tarjeta de desarrollo para PIC16FXXX </a>
<a href="#1" onClick="mover('mover','1000')";> Condensador</a>

y la página donde está todo

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled Document</title>
<style>

#contenedor {
	width:400px;
	height:400px;
	overflow:hidden;
	background-color:#CC6600;
	position:relative;


}

#mover {
	width:1600px;
	height:300px;
	background-color: #FFCC66;
	position:static;

}




</style>
  <script language="javascript" type="text/javascript">
        function mover(elemento,pos) {
		var cantidad = pos + "px";
				document.getElementById(elemento).style.webkitTransform = "translate(100px,0)";
				document.getElementById(elemento).style.MozTransform = "translate('+cantidad+',0)";


        }
</script>
</head>

<body>

<div id="contenedor">
  <div id="mover">Content for  id "mover" Goes Here</div>
</div>
  					<a href="#1" onClick="mover('mover','500')";> Tarjeta de desarrollo para PIC16FXXX </a>
					  <a href="#1" onClick="mover('mover','1000')";> Condensador </a>



</body>
</html>

Por su ayuda muchas gracias

#2 (**permalink**) 21/07/2013, 15:18

Ya lo haces bien el el mozTransform, no?

Código Javascript:

Ver originaldocument.getElementById(elemento).style.MozTransform = "translate('+cantidad+',0)";

Tendrías que hacer lo mismo en webkitTransform...

Código Javascript:

Ver originaldocument.getElementById(elemento).style.webkitTransform = "translate('+cantidad+',0)";

Un saludo

lovecom45 · #3 (**permalink**) 21/07/2013, 15:24

3nr1c no ni así me funciona no cambia nada si le pongo una cantidad fija por ejemplo 100px si lo hace pero intentando poner la vauable no funciona.

lovecom45 · #4 (**permalink**) 21/07/2013, 21:31

Creo que ya lo solucioné el problema estaba en no poner entre comillas dobles el +cantidad+

Así me funcionó todo:

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
        function mover(elemento,pos) {
        var cantidad = pos + "px";
                document.getElementById(elemento).style.webkitTransform = "translate("+cantidad+",0)";
                document.getElementById(elemento).style.MozTransform = "translate("+cantidad+",0)";
 
 
        }
</script>

Muchas gracias 3nr1c.