¡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