[javaEScript] Mover DIV con JavaScript recursivamente

Jue Jun 14 11:11:48 PDT 2007

Buscando lo que comentó Carlos, encontré como leer el estilo asignado en un
estilo y no en forma "intrusiva".

En FF es document.defaultView.getComputedStyle(bloque,'').getPropertyValue("top").
En IE es document.getElementById ('bloque').currentStyle.top

acá va algo de código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
#parrafo {position:absolute; top:500px; left:300px; width:200px;
height:100px; background-color: #99FFFF}
</style>
<script type="text/javascript">
<!--
function MoverTexto(id,d){

 var bloque=document.getElementById(id);
alert (document.defaultView);
alert (bloque.currentStyle);
 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);
 y= parseInt(y);

switch(d){
 case "A":  x -=10; break;
 case "B":  x +=10; break;
 case "D":  y +=10; break;
 case "I":  y -=10; break;
}
bloque.style.top=x+"px";
bloque.style.left=y+"px";
}
</script>
</head>

<body>

<p id="parrafo">HAZ CLIC EN LOS BOTONES PARA MOVER ESTE BLOQUE DONDE
DESEES</p>

<div><a href="#" onclick="MoverTexto('parrafo', 'A');">Arriba<a/> | <a
href="#" onclick="MoverTexto('parrafo', 'B');">Abajo<a/> | <a href="#"
onclick="MoverTexto('parrafo', 'D');">Derecha<a/> | <a href="#"
onclick="MoverTexto('parrafo', 'I');">Izquierda<a/> </div>

</body>
</html>

y el link de donde lo saqué:
http://www.mozillaes.org/foros/viewtopic.php?p=105219

GRACIAS CARLOS!!!!

El día 14/06/07, Juan José Montes de Oca Arbós <
juanjose.montesdeocaarbos en gmail.com> escribió:
>
> Hola Hernan. Para "apagar" el setInterval, tenés que usar clearInterval,
> como bien vos decís.
>
> Cuando creaste el algo = setInteval... le asignaste un puntero de esa
> funcion a la variable algo, y como la variable "algo" nunca la declaraste,
> es de ambito "global". Al ser global, podés acceder a ella desde cualquier
> punto del código, y ese es el parametro que le tenes que pasar a
> clearInterval. Modificando tu programa, si el x es menor a 1000, entonces,
> usamos el clearInterval... te copio el código:
>
> <html>
> <head>
> <title>prueba</title>
> <script type="text/javascript">
> function mover(){
> miObjeto = document.getElementById('cosa');
> x = parseInt(miObjeto.style.left );
>        if (x>100){
>            x = x - 10;
>         miObjeto.style.left = x + 'px';
>        } else {
>          clearInterval (esto);
>        }
> }
>
> function arrancar(){
> esto = setInterval("mover()",50);
> }
> </script>
> </head>
>
> <body onLoad="arrancar()">
> <div id="cosa" style="position:absolute; width:100px; height:100px;
> left:1000px">
>   <h1>holaaaaaaa</h1>
>   <h1>aaaaaaaaaa</h1>
> </div>
> </body>
> </html>
>
> Saludos!!!!
>
> El día 14/06/07, "Hernán Beati - SaberWeb.com.ar" <hernan en saberweb.com.ar>
> escribió:
> >
> > Juan José Montes de Oca Arbós escribió:
> > > 1) si los declaraste en una
> > > sección STYLE o en un archivo CSS, al levantarlo con JS mediante
> > > objeto.style solo te devuelve los atributos cargados en el HTML.
> >
> > Muchísimas gracias, Juan José!! :-)
> >
> > No termina de sorprenderme que solo se pueda leer con JS valores de
> > propiedades CSS que hayan sido escritas adentro del tag, lo cual lo
> > vuelve a todas luces inaccesible (en el sentido de JavaScript no
> > intrusivo, separación en capas de contenido, presentación e interacción,
> > etc.). ¿No hay forma de mover un DIV de forma no intrusiva?
> >
> > Finalmente pude moverlo (intrusivamente, hasta ahora!) con un
> > setInterval, pero la llamada a la función se repite permanentemente
> > mientras dure en pantalla el documento, ¿cómo se podría "apagar" esto?
> > Si quiero llamar a clearInterval, como fue "encendido" desde otra
> > función llamada arrancar(), no es global y no lo puedo acceder desde la
> > función mover()
> > Pongo el código abajo.
> > Gracias!!
> >
> > Hernán.-
> >
> > <html>
> > <head>
> > <title>prueba</title>
> > <script type="text/javascript">
> > function mover(){
> > miObjeto = document.getElementById('cosa');
> > x = parseInt(miObjeto.style.left);
> >         if (x>1000){
> >             x = x - 10;
> >          miObjeto.style.left = x + 'px';
> >         }
> > }
> >
> > function arrancar(){
> > esto = setInterval("mover()",50);
> > }
> > </script>
> > </head>
> >
> > <body onLoad="arrancar()">
> > <div id="cosa" style="position:absolute; width:100px; height:100px;
> > left:1200px">
> >    <h1>holaaaaaaa</h1>
> >    <h1>aaaaaaaaaa</h1>
> > </div>
> > </body>
> > </html>
> > _______________________________________________
> > javaEScript mailing list
> > javaEScript en scriptia.net
> > http://lists.scriptia.net/listinfo.cgi/javaescript-scriptia.net
> >
>
>
>
> --
> Juan José Montes de Oca Arbós.
>
> juanjose.montesdeocaarbos en gmail.com
> juanjosemontesdeocaarbos en hotmail.com
> http://world5.monstersgame.es/?ac=vid&vid=58044309
> http://www.montesoft.com.ar
> http://www.es-facil.com/ganar/alta?Id=64395956
>

-- 
Juan José Montes de Oca Arbós.

juanjose.montesdeocaarbos en gmail.com
juanjosemontesdeocaarbos en hotmail.com
http://world5.monstersgame.es/?ac=vid&vid=58044309
http://www.montesoft.com.ar
http://www.es-facil.com/ganar/alta?Id=64395956
------------ próxima parte ------------
Se ha borrado un adjunto en formato HTML...
URL: http://lists.scriptia.net/pipermail/javaescript-scriptia.net/attachments/20070614/9498ccff/attachment.html 