mover una capa haciendo onclick

susaninhax · #1 (**permalink**) 27/08/2009, 05:34

buenas compañeros.

Tengo una duda y espero me puedan ayudar.
Quiero mover una capa, en plan movimiento lateral de izquierda a derecha por ejemplo, y no tengo mucha idea de javascript. Encontré este codigo por ahí, y lo he medio adaptado como he podido. Pero utilizan el SetTimeOut para darle movimiento, pero me gustaría que se ejecutase cuando hiciese onclick en un enlace. Y no se como adaptarlo para ese caso.

el codigo es este:

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>
    <title>[e7] movimiento capas </title>
  </head>
  
  <body>
  
    <div id="capa1" 
         style="LEFT: 700px; POSITION: absolute; TOP: lopx; WIDTH: 300px; 
                Z-INDEX: 2; BACKGROUND: #A0A0A0;">
    Bienvenidos a mi página
    </div>
    
    <script language='JavaScript' type="text/javascript">
//<![CDATA[
var posicionX=700;
var posicionY=10;
function mueve_capa() {
if (posicionX> 10) {
    posicionX=posicionX-5; 
    capa1.style.left=posicionX; 
    posicionY=posicionY+1; 
    capa1.style.top=posicionY;
}
setTimeout("mueve_capa()" ,50); 
return;
}

setTimeout("mueve_capa()" , 10);
//]]>
</script>

  </body>
</html>

Alguien me podría decir que pongo en un onclick y que tengo que cambiar en el script??? imagino que en un onclick, por ejemplo: <a href="#" onclick="mueve_capa();">mover</a> pero luego no se que hacerle en el script, ya que es el setimeout el que llama a esa capa.

gracias de antemano por la ayuda.
Un saludo

Adler · #2 (**permalink**) 27/08/2009, 07:08

Hola

No comprendo el problema. Si te he entendido, tu mismo te has dado la respuesta
<a href="#" onclick="mueve_capa();">mover</a>

Ahora solo queda por quitar
setTimeout("mueve_capa()" , 10);

A no se que lo que quieras es que a cada click sobre la liga, la capa se desplace x pixels. en tal caso abría que rehacer todo el código

Suerte

susaninhax · #3 (**permalink**) 28/08/2009, 03:26

mmm tienes razón, voy a quitar la ultima linea, aunque lo que quiero realmente es que pinchando en ese enlace la capa se desplace, y luego pinchando en otro enlace, esa capa desaparezca y aparezca otra, todo dentro de un mismo contenedor, como un slider... pero no tengo ni idea de como hacer uno, arff... voy a ver si lo saco

mi problema es que no logro hacer uno que se vea bien en los explorers de un windows mobile, ...grrr, porqué tiene que existir tantas diferencias en los navegadores de los moviles con los navegadores de los ordenadores, me pone furiosa.

En opera movil, se ve perfecto, al igual que en opera ordenador, pero llegas a explorer del movil y no reconoce el link, no se mueve ni hace nada, se queda quieto, aaa pero llegas a explorer ordenador y funciona perfecto... es para tirarse de los pelos jajajaja no soporto explorer!!!

Adler · #4 (**permalink**) 28/08/2009, 05:19

Hola

En eso ya no puedo ayudarte

Suerte

susaninhax · #5 (**permalink**) 31/08/2009, 02:17

Gracias de todos modos.

Supongo que el ordenador no tiene nada que ver con los moviles.

susaninhax · #6 (**permalink**) 31/08/2009, 03:04

una ultima pregunta sobre esto, por si las moscas, este script lo veo perfectamente en explorer y en opera, pero no lo veo en firefox. Alguien sabría como solucionarlo??? thankiusss!!

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>
    <title>[e7] movimiento capas </title>
  </head>
  
  <body>
  
  <a href="#" onclick="mueve_capa();">mover</a><br /><br />
  
    <div id="capa1" 
         style="LEFT: 50px; POSITION: absolute; TOP: 70px; WIDTH: 300px; 
                Z-INDEX: 2; BACKGROUND: #A0A0A0;">
    Bienvenidos a mi página
    </div>
    
    <script language='JavaScript' type="text/javascript">
//<![CDATA[
var posicionX=300;
var posicionY=50;
function mueve_capa() {
if (posicionX> 10) {
    posicionX=posicionX-5; 
    capa1.style.left=posicionX; 
    //posicionY=posicionY+1; 
//    capa1.style.top=posicionY;
}
setTimeout("mueve_capa()" ,2); 
return;
}

//setTimeout("mueve_capa()" , 2);
//]]>
</script>

  </body>
</html>

Adler · #7 (**permalink**) 31/08/2009, 04:30

Hola

A simple vista capa1 no está definido. Prueba con document.getElementById("capa1").style.left= posicionX + "px";

Suerte

susaninhax · #8 (**permalink**) 03/09/2009, 00:24

gracias adler

Es cierto, en firefox ya funciona, aunque me funciona distinto al resto, me va del tirón hacia el otro lado, cada vez que le doy, va un par de pixeles, tengo que darle muchisimas veces para llegar a su destino. voy a seguir mirando, pero al menos ya se mueve,. muchas gracias de veras

Adler · #9 (**permalink**) 03/09/2009, 05:24

Hola

Cita:

Iniciado por susaninhax

gracias adler

Es cierto, en firefox ya funciona, aunque me funciona distinto al resto, me va del tirón hacia el otro lado, cada vez que le doy, va un par de pixeles, tengo que darle muchisimas veces para llegar a su destino. voy a seguir mirando, pero al menos ya se mueve,. muchas gracias de veras

Lo he probado tanto en FF como en IE y el efecto en ambos es el mismo. Clickeando una sola vez desplaza la capa hacia la izquierda