Mostrar <li> por orden en lugar de random

maxi_lance · #1 (**permalink**) 16/09/2010, 13:56

Que tal, adapte un script de la web que funciona OK. Muestra el contenido de los <li> que haya cargado de a uno por vez por un lapso de tiempo determinado. Todo esto lo hace aleotoriamente, es decir, con random.

Lo que necesito es que las muestre segun un orden, del menor al mayor por ejemplo. COmo podria editar el script para incorporarle numeros a los divs y que la funcion js lo interprete ?

El ejemplo lleva includio el jquery.js.

Código HTML:

<ul id="tips">
	<li>... if you want to become a better coder you need to eat your vegetables?</li>
	<li>... it takes more time to code a web page then to make a pizza?</li>
	<li>... you should validate your code?</li>
	<li>... jQuery is your friend? For real!</li>
	<li>... no matter what some people claim, you can't learn CSS in 3 hours?</li>
</ul>

Código HTML:

#tips, #tips li{
	margin:0;
	padding:0;
	list-style:none;
	}
#tips{
	width:250px;
	font-size:16px;
	line-height:120%;
	}
#tips li{
	padding:20px;
	background:#e1e1e1;
	display:none; /* hide the items at first only */
	}

Código Javascript:

Ver original<script type="text/javascript">
 
this.randomtip = function(){
 
    var pause = 3000; // define the pause for each tip (in milliseconds) 
    var length = $("#tips li").length; 
    var temp = -1;      
 
    this.getRan = function(){
        // get the random number
        var ran = Math.floor(Math.random()*length) + 1;
        return ran;
    };
    this.show = function(){
        var ran = getRan();
        // to avoid repeating
        while (ran == temp){
            ran = getRan();
        }; 
        temp = ran;
        $("#tips li").hide();   
        $("#tips li:nth-child(" + ran + ")").fadeIn("fast");        
    };
    
    show(); setInterval(show,pause);
    
};
 
$(document).ready(function(){   
    randomtip();
});
 
</script>

David · #2 (**permalink**) 16/09/2010, 22:03

No entendí muy bien, ¿quieres que en lugar de ser aleatorio te los muestre por orden? En ese caso podrías iniciar un contador y aumentarlo cada vez que se llama a la función show(); y a partir de allí mostrar el elemento.

maxi_lance · #3 (**permalink**) 17/09/2010, 08:35

gracias DAvid por tu respuesta !
lo que necesito es que se muestre por orden, como tu dices.

Lo del contador me parece lo correcto, pero no tendria que incorporarle un numero a cada <li> para que sepa cual mostrar?

Disculpa la pregunta, estoy un poco flojo en javascript y por ahi es mas facil de lo que parece.

Gracias nuevamente .

David · #4 (**permalink**) 17/09/2010, 10:13

No, no es necesario. En la línea 22 de tu código, basta con sustituir la variable ran por el contador.

maxi_lance · #5 (**permalink**) 20/09/2010, 07:34

David, incorporé el contador pero lo que me muestra es la info que está dentro del <li> ultimo. Y luego de este, no muestra nada. No logro hacer que lo muestre desde el primero. Debajo el codigo a ver si pueden darme una mano.

Código Javascript:

Ver original<script type="text/javascript">
this.randomtip = function(){
    var i=1;
    var pause = 5500; // define the pause for each tip (in milliseconds) Feel free to make the pause longer so users can have time to read the tips :)
 
    while (i<=7) {
    
        this.show = function(){
        $("#tips li").hide();   
        $("#tips li:nth-child(" + i + ")").fadeIn("fast");      
        };
    
    // initiate the script and also set an interval
    show(); setInterval(show,pause);
 
    i=i+1;
    }
};
 
$(document).ready(function(){   
    randomtip();
});
</script>

Gracias !

David · #6 (**permalink**) 20/09/2010, 09:15

El problema es que estás sobreescribiendo la función show. Prueba esto:

Código Javascript:

Ver originalfunction nextTip() {
    var child = Number($("#tips").data("current"));
    
    $("#tips li").hide();   
    $("#tips li:nth-child(" + i + ")").fadeIn("fast");
    
    child++;
    $("#tips").data("current", child);
}
 
$(document).ready(function(){
    var pause = 5500;
    
    $("#tips").data("current", 1);
    nextTip();
    
    setInterval(nextTip, pause);
});

Dany_s · #7 (**permalink**) 20/09/2010, 10:00

tiene que tener un orden especial?
aca te paso uno que muestra del primero al ultimo

Código HTML:

Ver original<html>
<head>
<title>Prueba</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$( function(){   
    $("#tips li:eq(0)").show();
    setInterval("mostrar()",1000);
});
mostrar = function(){
    li = $("#tips li:visible").hide();
    liNext = li.next();
    if(liNext.length){
        liNext.show();
    } else {
        $("#tips li:eq(0)").show();
    }
};
</script>
<style>
#tips, #tips li{
    margin:0;
    padding:0;
    list-style:none;
    }
#tips{
    width:250px;
    font-size:16px;
    line-height:120%;
    }
#tips li{
    padding:20px;
    background:#e1e1e1;
    display:none; /* hide the items at first only */
    }
</style>
</head>
<body>
<ul id="tips">
    <li>... if you want to become a better coder you need to eat your vegetables?</li>
    <li>... it takes more time to code a web page then to make a pizza?</li>
    <li>... you should validate your code?</li>
    <li>... jQuery is your friend? For real!</li>
    <li>... no matter what some people claim, you can't learn CSS in 3 hours?</li>
</ul>
</body>
</html>

maxi_lance · #8 (**permalink**) 21/09/2010, 08:26

Gracias Dany por el ejemplo ...
Al final modifiqué un poco el script de DAvid y funcionó ...

Código Javascript:

Ver original<script type="text/javascript">
this.randomtip = function(){
 
    function nextTip() {
    var child = Number($("#tips").data("current"));
    
    if (child > 7) { var child = 1}
    $("#tips li").hide();   
    $("#tips li:nth-child(" + child + ")").fadeIn();
    
    child++;
    $("#tips").data("current", child);
    }
 
$(document).ready(function(){
    var pause = 5250;
   
    $("#tips").data("current", 1);
    nextTip();
    
    setInterval(nextTip, pause);
});
 
    
};
 
$(document).ready(function(){   
    randomtip();
});
</script>

Le agregué esta linea:

Código HTML:

if (child > 7) { var child = 1}

Para que al llegar al ultimo <li> vuelva a mostrar el primero, siempre en Loop, que no termine nunca.

Saludos!