jueves, 26 de mayo de 2011

Oloblogger

Oloblogger


Rotar texto aleatorio en un mismo espacio

Posted: 25 May 2011 10:22 AM PDT

El título creo que es autoexplicativo, pero de todas formas, lo que conseguimos con este código es mostrar un texto aleatorio en una determinada capa y que este cambie automáticamente cada cierto tiempo, sin necesidad de refrescar la página.

Está basado en el mismo JavaScript que genera frases aleatorias, añadiendo una función que captura el elemento por su ID (en el ejemplo rotando) para su posterior sustitución. Esa función incluye al final una llamada a sí misma, que hace que se vuelava a ejecutar automáticamente cada cierto tiempo.




Este es el código y lo podéis añadir en un gadget tipo HTML/JavaScript o en una entrada. Si lo queréis poner directamente en la plantilla, tendréis que sustituir todas las comillas dobles (") por comillas simples (').

<script type="text/javascript">
var indice = 0;
frases = new Array();
frases[0] = "Texto1";
frases[1] = "Texto2";
frases[2] = "Texto3";
frases[3] = "Texto4";

indice = Math.random()*(frases.length);
indice = Math.floor(indice);

function rotar() {
if (indice == frases.length) {indice = 0;}
document.getElementById("rotando").innerHTML = frases[indice];
indice++;
setTimeout("rotar();",5000);
}
</script>

<div id="rotando" style="height:60px;margin:0px auto;"></div>
<script type="text/javascript">rotar();</script>

Debéis sustituir TextoX por los distintos textos que queréis que vayan apareciendo. Se pueden añadir más sin problemas, generando a continuación de frases[3] = "Texto4"; más líneas con el mismo formato, sin olvidar ir cambiando el índice de cada elemento (frases[4], frases[5], frases[6], etc.)

Para aumentar o disminuir el tiempo entre frase y frase, hay que cambiar el valor de setTimeout, que viene en milisegundos y que en el ejemplo está establecido en 5 seguntos (5000).

Por último el height que se ha incluído en el estilo de la capa, sirve para que no cambie el tamaño del div en función de la distinta longitud del texto. De otra manera, todo el contenido de la página se ajustaría (movería) según la frase fuera más o menos larga, resultando probablemente bastante incómodo para leer.


No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog