divs apareciendo aleatoriamente

angeldelolmo · #1 (**permalink**) 18/06/2009, 06:28

Necesito ir mostrando una serie de divs a modo de "bocadillos" mientras se navega por la web.

Si salen aleatoriamente, mejor, lo importante es que se vaya mostrando uno por ejemplo cada 3 segundos.

Gracias !

KiraSakuya · #2 (**permalink**) 18/06/2009, 07:02

angeldelolmo · #3 (**permalink**) 18/06/2009, 10:01

No me funciona, me da un error de sintaxis en esta línea:

document.getElementById("TuDiv").style.left=random number;

Además no se si me he explicado bien...

lo que necesito es que cada vez se vea SÓLO un div, y que yo defina de antemano dónde va a aparecer siempre cada uno. Lo único que debe ser aleatorio es el órden de aparición...

GRACIAS DE TODAS FORMAS ! ;)

KiraSakuya · #4 (**permalink**) 19/06/2009, 00:18

Código Testado:

Ver original<script language="javascript" type="text/javascript">
var posicion = new Array();
var i=0;
function testtimeout(){
switch (i)
{
    case 0: posicion[0]=500;
            posicion[1]=100;
            break;
    case 1: posicion[0]=100;
            posicion[1]=500;
            break;
    case 2: posicion[0]=300;
            posicion[1]=300;
            break;
    
}
var randomnumber=Math.floor(Math.random()*11);
document.getElementById("TuDiv").style.left=posicion[0]
var randomnumber=Math.floor(Math.random()*11);
document.getElementById("TuDiv").style.top=posicion[1]
i=Math.floor(Math.random()*3);
t=setTimeout("testtimeout()",3000); 
}
 
</script>

Si es que las prisas nunca fueron buenas consejeras, sobraban espacios y estaba mal el nombre de alguna variable.

Te lo pongo a lo sencillo, pero si de antemano tienes las posiciones en un array por si son muchas, mejor, no cargas tanto codigo con un switch y solo tienes que adaptar el codigo un poco. Pruebalo y me cuentas

angeldelolmo · #5 (**permalink**) 19/06/2009, 03:22

Gracias KiraSakuya ;)

He puesto esto y no me funciona, no se si tengo que aplicarle algún estilo al div o algo.... He llamado a la función en el body onload, no se si es correcto...

Y cómo hago para poner varios divs???
Esque no se si me he explicado bien, tienen que ser varios div y que en cada momento vaya mostrando uno, siempre en la misma posición, pero cada vez un div aleatoriamente...

Código PHP:

  <!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=UTF-8" />
<title>Documento sin t&#237;tulo</title>
</head>

<body onload="testtimeout()">
<div  id="TuDiv">contenido</div>
<script language="javascript" type="text/javascript">
      var posicion = new Array();
      var i=0;
      function testtimeout(){
      switch (i)
      {
          case 0: posicion[0]=500;
                  posicion[1]=100;
                  break;
          case 1: posicion[0]=100;
                  posicion[1]=500;
                  break;
          case 2: posicion[0]=300;
                  posicion[1]=300;
                  break;
      }
      var randomnumber=Math.floor(Math.random()*11);
      document.getElementById("TuDiv").style.left=posicion[0]
      var randomnumber=Math.floor(Math.random()*11);
      document.getElementById("TuDiv").style.top=posicion[1]
      i=Math.floor(Math.random()*3);
      t=setTimeout("testtimeout()",3000);
      }
</body>
</html>

KiraSakuya · #6 (**permalink**) 19/06/2009, 04:18

A ver si lo he entendido bien, mira a ver si el siguiente codigo te funciona.
Yo lo estoy probando en explorer 7.0 asi que si utilizas otro navegador dimelo, porque lo testeo en el otro navegador ok? (En este PC del trabajo solo tengo IE -.-)

Código que esperemos sea definitivo:

Ver original<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Página sin título</title>
<script language="javascript" type="text/javascript">
var posicion = new Array();
var i=0;
function testtimeout(){
switch (i)
{
    case 0: document.getElementById("Div0").style.visibility = "visible"
            document.getElementById("Div1").style.visibility= "hidden"
            document.getElementById("Div2").style.visibility = "hidden"
            break;
    case 1: document.getElementById("Div0").style.visibility = "hidden"
            document.getElementById("Div1").style.visibility = "visible"
            document.getElementById("Div2").style.visibility = "hidden"
            break;
    case 2: document.getElementById("Div0").style.visibility = "hidden"
            document.getElementById("Div1").style.visibility= "hidden"
            document.getElementById("Div2").style.visibility = "visible"
            break;
    
}
 
i=Math.floor(Math.random()*3) //El *3 deberia cambiar en funcion del numero de divs que tienes, esto luego se tiene que acomodar a
//lo que tu necesitas :) es el numero de numeros que recorre desde 0 hasta el numero(en este caso 3) -1
 
t=setTimeout("testtimeout()",3000); 
}
 </script>
</head>
<body onload="testtimeout()">
    <div style="position: absolute; left: 100px; top: 100px" id="Div0">CONTENIDO0</div>
    <div style="position: absolute; left: 200px; top: 200px ; visibility:hidden" id="Div1">CONTENIDO1</div>
    <div style="position: absolute; left: 300px; top: 300px ;visibility:hidden" id="Div2">CONTENIDO2</div>
</body>
</html>

El *3 deberia cambiar en funcion del numero de divs que tienes, esto luego se tiene que acomodar a lo que tu necesitas :)

Suerte :D

angeldelolmo · #7 (**permalink**) 19/06/2009, 06:24

MUCHAS GRACIAS!!!

Era justo lo que necesitaba!

Muy buena ayuda, KiraSakuya, así da gusto ;)

KiraSakuya · #8 (**permalink**) 19/06/2009, 06:33

Ha costao eh?? xDD Me alegra haberte ayudado :)