mover divs con javascript mediante botones

[mensajeescrito]

Hola buenas, veran tengo un problemilla a ver si pueden ayudarme.

Necesito conseguir que varios divs, 3, colocados todos en horizontal en una posicion mas o menos alta en el "top" de la pantalla y que haya un menu de botones (un boton para cada div) en el cual cuando haces un click al boton1 , el div 1 se coloca mas abajo en la pantalla,

cuando se haga click en el boton 2 entonces el div 1 recupere su posicion inicial arriba en el top y baje en su lugar el div 2 , y lo mismo con el 3.


He buscado hasta la saciedad en internet pero solo veo ejemplos de como mediante botones cambiar un solo div en el espacio arriba y abajo a derecha e izquierda sin limite ni tampoco se como añadirles mas divs ni limitar los botones a un solo click.

Os pondre lo que tengo de codigo pero si puedieran ayudarme les estaria muy agradecido.

Gracias de antemano.

Código CSS:

<style type="text/css">
 
#parrafo {position:absolute; top:500px; left:300px; width:200px; height:100px; background-color: #99FFFF}
 
</style>
 

Código Javascript:

<script type="text/javascript">
 
function MoverTexto(id,d){
 
var bloque=document.getElementById(id);
 
var x=(document.defaultView && document.defaultView.getComputedStyle) ?
document.defaultView.getComputedStyle(bloque,'').getPropertyValue("top") :
bloque.currentStyle ? bloque.currentStyle.top : "";
 
 
var y=(document.defaultView && document.defaultView.getComputedStyle) ?
document.defaultView.getComputedStyle(bloque,'').getPropertyValue("left") :
bloque.currentStyle ? bloque.currentStyle.left : "";
 
x= parseInt(x);
 
 
switch(d){
case "arriba": x -=200; break;
case "abajo": x +=200; break;
}
bloque.style.top=x+"px";
 
}
 
</script>
 

Código HTML:

<a href="#" onclick="MoverTexto('parrafo', 'arriba');">Arriba<a/> 
<a href="#" onclick="MoverTexto('parrafo', 'abajo');">Abajo<a/>
 
<div id="parrafo"></div>
 

[hackjose]

Para empezar tus elementos deben ser elementos posicionados(relative,absolute o fixed)

Despues el onclick en cada boton(div1(),div2(),div3())

El cuerpo de div1 que baja el div numero 1 seria algo asi:

function div1()
{
document.getElementById(div1).style.top = "200px";
}

div2 que sube div1 y baja div numero 2

function div2()
{
document.getElementById(div1).style.top = "0px";
document.getElementById(div2).style.top = "200px";
}

div3 que sube div2 y baja el div numero 3

function div3()
{
document.getElementById(div2).style.top = "0px";
document.getElementById(div3).style.top = "200px";
}

pienso que seria asi

saludos

[mensajeescrito]

Muchas gracias por guiarme a dar con la solucion intentare algo en este sentido y si doy con lo clave lo posteare aqui.

Pero una cosa: se podria mediante los botones hacer que un div (cualquiera de ellos) baje abajo , y el que se halle abajo anteriormente se suba arriba automaticamente pero sea cual sea o tienen que tener nombres especificos cada div?

Y otra cosa, el codigo que he puesto hace que cuando se hace click en los botones el div se mueva, eso esta bien pero es que solo necesito que hagan dos operaciones los botones 2 click , uno para subir el div y otro para bajar el div , en las posicion absoluta o relativa que se le indique previamente y nada mas.

pero es que el codigo que he puesto se puede mover indefinidamente (hacia arriba y abajo) haciendo click

y claro eso no es lo que necesito en este caso.

Gracias de nuevo.

[hackjose]

Se van moviendo indefinidamente por que vas sumando lo anterior mas el incremento actual por eso solo puse 200 y 0 estatico, osea arriba y abajo

En cuanto a la primera pregunta
deberias comprobar que div esta abajo y subirlo, y ahora si bajar el div esperado para hacer esto es facil solo tendrias que seleccionar todos los div ya sea con getelementbyid o con getelementsbytagname y despues ver cual style.top es 200(el div esta abajo) y entonces establecer 0(subir el div), ya luego bajarias el div actual
Como todos los botones haran lo mismo solo usaras una funcion

Basicamente es aplicar esto
if(style.top == 200){style.top=0;}

saludos

[mensajeescrito]

He intentado hacer lo que me has dicho, de hecho te muestro lo que he hecho para ver si esta bien, pero no funciona ,soy novato en javascript . Seria genial que me saliera esto por que opdria resolver con esto un gran problema que tengo.

Gracias de antemano.

Aqui lo que llevo hecho ( pero no funciona no se porque):

Código CSS:

<style type="text/css">
     
        #div1 {position:absolute;  left:300px; width:100px; height:100px; background-color: #99FFFF}
        #div2 {position:absolute;  left:500px; width:100px; height:100px; background-color: #99FFFF}
        #div3 {position:absolute;  left:700px; width:100px; height:100px; background-color: #99FFFF}     
        
    </style>
 

Código Javascript:

<script>   
    
        function div1()
        {
        document.getElementById(div1).style.top = "200px";
        }
        
        /*div2 que sube div1 y baja div numero 2*/
        
        function div2()
        {
        document.getElementById(div1).style.top = "0px";
        document.getElementById(div2).style.top = "200px";
        }
        
        /*div3 que sube div2 y baja el div numero 3*/
        
        function div3()
        {
        document.getElementById(div2).style.top = "0px";
        document.getElementById(div3).style.top = "200px";
        }   
     
 
        if(style.top == 200){style.top=0;}   
            
    </script>
 

Código HTML:

<body>
 
    <a href="#" onclick="div1();">Abajo 1<a/> 
    <a href="#" onclick="div2();">Abajo 2<a/>
    <a href="#" onclick="div3();">Abajo 3<a/>
    
         
    <div id="div1">div 1</div>    
    <div id="div2">div 2</div>     
    <div id="div3">div 3</div>    
    
 
</body>