Mostrar y Ocultar elementos Random

MRBarto · #1 (**permalink**) 09/10/2008, 23:12

Hola, a ver si alguien me puede dar una mano con esto...

Lo que quiero hacer es aparentemente sencillo, pero no encuentro ejemplos por ningún lado.

Quisiera tener varios elementos de una lista, por ej...

Código PHP:

  <ul>
<li>
Primer texto
</li>
<li class="selected">
Segundo texto
</li>
<li>
Tercer texto
</li>
</ul>

Como veran, puse un class="selected" en el segundo texto.. Pero ahí está la cuestión...

Quisiera que al cargar la página, cualquier elemento de la lista [al azar] obtenga la clase "selected" (que lo único que haría era darle la propiedad de visibility:show, mientras que los demas estan hidden), y que al hacer click en un link, nuevamente al azar le quite la clase "selected" al elemento de la lista y se la otorgue a otro..

Esto es sencillamente para hacer un cuadro de "consejos" o "tips" sobre el sitio, al azar, y que haciendo click en un link se vayan mostrando otros elementos de esa lista..

Espero haber sido claro y a ver si alguien me puede orientar un poco al menos con respecto al codigo JS que haga falta..

Gracias!

caricatos · #2 (**permalink**) 10/10/2008, 00:12

Hola:

Evidentemente, tu problema no necesita de peticiones al servidor, así que en bez de Ajax debe tratarse en javascript...

Bueno, sobre el tema, creo que pueden existir distintas formas... de todas maneras, voy a corregirte con la forma de mostrar/ocultar. el estilo visibility no es show sino visible.

Pues las clases serían:
.selected {display: block;]
.no_selected {display: none;}

En el inicio, calcularía el número de filas, y a partir de un random las inicializaría, para facilitar las cosas le pondría a la lista un id
<ul id="lista">
...
</ul>

y tanto el inicio como el botón lo pondía más o menos:

function tag(id) {return document.getElementById(id);}
function azar() {
listado = tag("lista").getElementsByTagName("li");
elegido = Math.floor(Math.random() * listado.length);
for (var i = 0, total = listado.length; i < total; i ++)
listado[i].style.className = (i == elegido) ? "selected":"no_selected";
}
window.onload = azar;

y en el botón onclick="azar()"

Tal vez haya soluciones mejores.

Saludos

MRBarto · #3 (**permalink**) 10/10/2008, 00:46

Hola, tienes razón, no sería una cuestión de Ajax sino sólo javascript..

Intente hacer lo que comentas, asi:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function tag(id) {return document.getElementById(id);}
function azar() {
listado = tag("lista").getElementsByTagName("li");
elegido = Math.floor(Math.random() * listado.length);
for (var i = 0, total = listado.length; i < total; i ++)
listado[i].style.className = (i == elegido) ? "selected":"no_selected";
}
window.onload = azar;
</script>
<style type="text/css">
.no_selected {display: none;}
.selected {display: block;}
</style>
</head>
<body>
    <ul id="lista">
    <li>Uno</li>
    <li>Dos</li>
    <li>Tres</li>
    </ul>
    
<a href="#" onclick="azar()">Azar</a>
</body>
</html>

Pero al parecer el JS no logra aplicarle los Class a los <li>.. Si puedes ayudarme te lo agradeceria.. La verdad lo mio es mas el diseño y el CSS que el JavaScript

caricatos · #4 (**permalink**) 10/10/2008, 01:01

Hola:

No es que no funcione, es que al poner el código "a capella" se me coló el style...

Verás, si las clases solo van a cambiar uno de los estilos, tal vez sea más eficiente cambiar ese estilo, y por eso pensé poner:
style.display = (i == elegido) ? "block":"none";

Y no sería necesario el tag style... pero si se usan las clases el style sobra:
listado[i].className = (i == elegido) ? "selected":"no_selected";

Saludos

MRBarto · #5 (**permalink**) 10/10/2008, 01:10

Lo que busco que haga es tener todas los elementos de la lista ocultos, y que tanto al hacer click en un link/boton como al cargar, elija un elemento de la lista y le aplique el "display:block".. Y luego, nuevamente al cargar o hacer click, devuelva a todos los elementos el display:none, menos a uno nuevo al que le otorgue el display:block..

Edit: perdón, creo que ahora entendi.... la última linea en donde cambia el display sería asi:

listado[i].style.display = (i == elegido) ? "block":"none";

Verdad? Creo que ahora si me esta funcionando!

caricatos · #6 (**permalink**) 10/10/2008, 01:22

Hola:

Pues eso es lo que en teoría hace lo que puse, pero en un array de tres elementos, hay un porcentaje alto de probabilidades de que se repitan números... si quieres evitarlo, debes condicionar que el random sea distinto del último random... por ejemplo con un bucle while

Saludos

MRBarto · #7 (**permalink**) 10/10/2008, 01:26

Efectivamente caricatos, está funcionando perfectamente.

Increible, me solucionaste en menos de una hora lo que me pase varias más buscando en Google..

Un millón de gracias!

caricatos · #8 (**permalink**) 10/10/2008, 01:37

Hola:

Me alegro, de paso, un arreglillo para evitar repeticiones...

Código:

function azar() {
listado = tag("lista").getElementsByTagName("li");
do 
elegido = Math.floor(Math.random() * listado.length);
while (listado[elegido].className == "selected") ;
for (var i = 0, total = listado.length; i < total; i ++)
listado[i].className = (i == elegido) ? "selected":"no_selected";
}

Saludos

MRBarto · #9 (**permalink**) 10/10/2008, 12:01

Edit: Aparentemente el script está cargando a lo último, osea luego de cargar TODOS los otros elementos de la página... Esto hace que si la carga no es muy rápida, no se muestre ningún elemento hasta que se haya cargado por completo...

Existirá alguna manera de "agilizar" el momento en que le asigna el display:block a un elemento LI, o hacer que sea prioridad al cargar la página?

Gracias de nuevo..

MRBarto · #10 (**permalink**) 19/10/2008, 12:47

Puede ser que algo de este codigo JS me esté colgando el IE6? Cuando saco esto del .JS o el codigo html con el listado sobre el que actua el JS, la página carga sin problemas... Pero con el codigo ahi, el IE 6 "No Responde" y nunca termina de cargar la pagina.. (con IE7, Firefox, etc, carga perfectamente)

Código HTML:

function tag(id) {return document.getElementById(id);}
function randomTips() {
listado = tag("tips").getElementsByTagName("li");
do 
elegido = Math.floor(Math.random() * listado.length);
while (listado[elegido].style.display == "block") ;
for (var i = 0, total = listado.length; i < total; i ++)
listado[i].style.display = (i == elegido) ? "block":"none";
}
window.onload = randomTips;

Otra cosa al margen de eso, en el sitio utilizamos jQuery... Como puedo hacer para que la ejecución de ese codigo JS (el que puse mas arriba) sea más inmediata que el "window.onload"? Como si fuera un onDomReady... Puede ser algo de "$(document).ready" en el caso de usar jQuery? Aunque no se como utilizarlo bien en este caso...

Cualquier ayuda la agradeceria mucho...

Saludos

EDIT: Mmm.. Parece que el problema está en la posición del código HTML con la lista sobre la que actua este JS... Lo moví abajo de una tabla (listado de foros VBulletin) y no hubo problemas... Quizá haya algun problema relacionado a que esa tabla[lista de foros] se puede 'colapsar' con otro JS? (ver este mismo foro, como se pueden "minimizar" las secciones)