Rotar texto aleatorio en un mismo espacio | Oloblogger 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 determi...

25 de mayo de 2011

Rotar texto aleatorio en un mismo espacio

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 vuelva 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.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

43 comentarios :

  1. ¡Hola!
    Primeramente; ¡Gracias por tus aportes!
    He probado lo que has explicado y no hubo problemas, muy fácil de hacer.
    Me agradaría saber cómo hacer para que la frase tenga un color determinado y que esté escrita en letra negrita. La deseo poner al costado del blog.
    ¿Es posible? ¿Será sencillo de hacer?
    Un saludo desde Mendoza, Argentina.

    ResponderEliminar
  2. Que bueno :D
    Oye tengo una duda que no tiene que ver con el tema, ¿como pongo bordes redondos a la sidebar?
    que cada gadget tenga su borde redondeado. uso el diseñador de plantillas.
    mi web: www.webwegame.co.cc
    estoy en reformas con el diseño de mi web en estos momentos, y por eso me ha surgido esa duda porque no me gusta como se ven los picos.

    ResponderEliminar
  3. Amanda, el código está preparado precisamente para colocar en la barra lateral, así que sólo tienes que copiar y pegar. Para cambiar el aspecto del texto, sólo tienes que insertar propiedades dentro de:
    style="height:60px;margin:0px auto;"
    Por ejemplo, para negrita y color, sería:
    style="height:60px;margin:0px auto;font-weight:bold;color:#990000;"

    We Game / Emilio, la forma más fácil es usando la propiedad border-radius y aplicarla a #sidebar-wrapper. Aquí tienes un generador para conseguir el efecto exacto, pero te advierto de que en los navegadores más antiguos, se seguirán viendo rectas:
    http://css3generator.com/

    ResponderEliminar
  4. Hola, he leído varias veces tus publicaciones, pero nunca te he felicitado, ESTAN TODAS MUY BUENAS. Hoy he tratado de probar tu artilugio y me ha quedo la duda de como haces para que tenga un fondo el texto aleatorio, como el de tu ejemplo. Gracias. Si quieres darme la respuesta por correo ya me suscribí.

    ResponderEliminar
  5. Virginia, todo lo que tenga que ver con el estilo de la capa, lo tienes que insertar dentro del STYLE.

    Por ejemplo, para un fondo oscuro y letras blancas...

    <div id="rotando" style="background:#333333; color:#ffffff;height:100px;padding:10px;margin:0px auto;"></div>

    ResponderEliminar
  6. Gracias Olaman... Lo pruebo y te aviso. ♥

    ResponderEliminar
  7. Todo quedo muy bien, justo lo que necesitaba. Probado y aprobado. =º)

    ResponderEliminar
  8. ¿En qué blog lo tienes puesto Luis?

    ResponderEliminar
  9. Sería interesante que esas frase1, frase2, etc, fueran a su vez enlaces de URL de títulos artículos del post, por ejemplo. No encuentro como hacerlo. ¿Es posible?.

    ResponderEliminar
  10. Bucan, manualmente sólo tendrías que usar este otro truco, http://goo.gl/ZrDb0, seleccionando y programando tú las entradas que quisieras.

    Si lo quieres hacer automático, ya tendrás que buscar un slide para entradas recientes, que así es como se llama. Pero ha de ser en otra web, porque yo no he publicado nada sobre eso. Lo siento.

    ResponderEliminar
  11. Una pregunta: ¿hay alguna forma de hacerlo de modo que el texto cambie aleatoriamente cada vez que se accede a la página en la que lo tienes, y no cada X tiempo?

    Gracias!!

    ResponderEliminar
  12. disculpa para cambiar el tamaño de la fuente o tipografía?

    ResponderEliminar
  13. Ouh y olvide preguntar si se puede justificar el texto, y como poner links en ciertas palabras muchas gracias de ante mano, saludos!

    ResponderEliminar
    Respuestas
    1. Hola. Pues para eso hay que recurrir a CSS como es habitual.

      En este caso sería añadiendo en cualquier línea de tu plantilla pero siempre entre las etiquetas SKIN algo así pero con las propiedades que gustes:
      #rotando {font-size: 10px;color: #red;text-align: justify;}

      Verás que la última propiedad es la que sirve para justificar.

      Y para poner links, simplemente escríbelos con el código habitual junto con el texto que acompañe, dentro de cada elemento del array. Lo único diferente es que tienes que usar comillas simples para formarlos.

      Eliminar
  14. Hola,

    en primer lugar muchas gracias por tu aportación.

    En mi caso lo que estoy utilizando es php, ya que tengo que poner unas condiciones, y entonces utilizo el código que comentas. Mi problema es que no me modifica el color de las letras, y ya he probado varias formas y nada...¿podrías recomendarme algo?
    Gracias de antemano,
    un saludo.

    ResponderEliminar
    Respuestas
    1. Debería funcionarte lo mismo que expliqué en el comentario 17.1

      Eliminar
  15. Hola, Muchas gracias por el Aporte,
    Me gustaria saber si se puede detener la ejecución
    al oprimir un botón en la pagina

    Agradezco su colaboración

    saludos

    ResponderEliminar
    Respuestas
    1. ¿Te vale que se pare al hacer hover?
      Añades al principio del script un var tiempo;
      Luego setTimeout("rotar();",5000); lo cambias a tiempo=setTimeout("rotar();",5000);

      Por último, dentro del div id="rotando" insertas esto:
      onmouseover="clearTimeout(tiempo);" onmouseout="rotar();"

      Eso hará que se detenga la rotación al pasar el puntero por encima y que cambie la frase al quitarlo.

      Para hacer un botón supongo que con añadir esto último dentro de un enlace en lugar de dentro del DIV y cambiando onmouseover por onclick, la cosa funcionará cómo quieres. Lo que no sabría decirte es cómo retomar la rotación.

      Eliminar
  16. Genial Oloman. Al fin he tenido tiempo y lo he puesto en mi blog personal; solo lo modifico un poco más y lo pongo en todos mis blogs.

    ResponderEliminar
  17. Estimado tengo un codigo javascript y lo deseo poner dentro de mi entrada de blogger, y no puedo hacerlo, me podrias ayudar un poco, gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Pocas pistas me das DAHP, porque no todo el JavaScript se puede usar igual en plantilla, en fichero o en entrada. No obstante una cosa que suele funcionar sería quitar todas las líneas de comentarios (//) que llevara y adicionalmente, escribir todo el código seguido, sin saltos de línea. Para esto último todas las líneas tienen que terminar con su correspondiente punto y como ( ; ) o corchete ( } ), según el caso.

      Eliminar
  18. Que tal, me interesa mucho poner este texto aleatorio, me parece muy buena idea pero no se como hacerlo. Entiendo que tengo que copiar y pegar en el codigo en mi sitio de dream weaver pero no se exactamente como y donde. podrias ser bien especifico?recien estoy empezando y no tengo mucha experiencia. Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola. Pues lo que yo no sé es como manejar Dreamweaver. Nunca he usado ese programa. Lo siento.

      Eliminar
  19. Ok, muchas gracias! Otra pregunta, esto es jquery o java script?

    ResponderEliminar
    Respuestas
    1. Acabo de ver este comentario. Se ve que me lo salté en su momento. jQuery es una librería JavaScript, pero por si es esto lo que preguntas, este código no necesita jQuery.

      Eliminar
  20. Hola. Quiero usar algo como esto pero que el texto se active cada día de acuerdo al dia. Para explicarme mejor
    Tengo el listado del mes de las Farmacias que estan de turno y quisiera que cuando entran al blog les aparezca ¨Hoy de turno Farmacia ¨tal ¨

    ResponderEliminar
    Respuestas
    1. Aquí tienes un sistema y aquí otro usando Google Drive como hoja de cálculo que a mí personalmente me parece más práctico.

      Ese es el método. Luego ya lo tienes que ajustar tú a tus necesidades.

      Eliminar
  21. Hola, gracias por este tuto me ha servido bastante pero no logro cambiarle el color al texto ya agrande el tamaño pero no me resulta cambiarle el color ¿en que parte debo agregar el codigo?

    este es el codigo del color FFCB05

    ResponderEliminar
    Respuestas
    1. Aquí Nil:
      style="height:60px;margin:0px auto;"

      En lugar de eso pon esto otro:
      style="height:60px;margin:0px auto;color:#FFCB05"

      Espero no llegar muy tarde...

      Eliminar
  22. hola!! cómo puedo cambiar la fuente???

    ResponderEliminar
    Respuestas
    1. En esta parte del código, María José:
      style="height:60px;margin:0px auto;"

      Si añades dentro de las comillas un font-size, font-family o font-style, podrás cambiar respectivamente tamaño, tipografía o estilo de la fuente.

      Eliminar
  23. Buen dia y muchas gracias por compartir su conocimiento
    me puedes ayudar con algo por favor. Como seria para mostrarlo por días ejemplo lunes muestra esto martes muestra otro miércoles otro y a si sucesivamente Gracias

    ResponderEliminar
  24. Hola,
    me interesa utilizar frases aleatorias, pero me gustaría que el texto ( o la imagen ) se mostrasen al hacer click sobre un botón. Esto es, una frase al azar cada vez que el usuario hace onclick, pero si es posible, preferiría que la página no refrescase.
    En principio lo quiero implementar en un sidebar de WP.

    ¿podría además presentarse una imagen y un texto a la vez y que estos estuviesen relacionados (el texto y la imagen siempre se corresponden, irían juntos), pero se presentan aleatoriamente de un listado de n frases / n imágenes (he leído antes en los comentarios de "frases aleatorias" que se pueden poner un móntón)?

    ¿Podría cambiar el botón por otro después de presentar el contenido (la frase aleatoria)? Supongo que me refiero al texto del botón...

    Son muchas dudas, pero es que no se por donde empezar. perdón.
    Salu2

    ResponderEliminar
  25. ¿Aún contesta mensajes? ¡Qué calidad de blog!
    Muy buenas, quisiera saber cómo puedo hacer que el texto cambie cada vez que se actualiza la página y no cada cierto tiempo.
    Gracias, un saludo.

    ResponderEliminar
  26. Busca "frases aleatorias". Está el link al principio del texto de esta misma página.

    ResponderEliminar
    Respuestas
    1. Gracias Moxi por indicarle a Unknown dónde buscar :)

      Sobre lo tuyo ¿viste este otro post en el que precisamente se cargan frases según pinchas en un enlace (botón) desde una hoja de Drive?

      Eliminar
  27. Hola, Muchas gracias, yo quiero saber si se puede hacer que en algun momento se pueda con un boton detener o pausar la rotacion y al mismo tiempo la frase que quede pase a una caja de texto para ser enviada luego a un script php. En fin solo necesito saber como pausar la rotacion y enviar lo que queda en ese div a una caja de texto de un formulario html dentro del mismo documento. Gracias

    ResponderEliminar
  28. No te preocupes ya obtuve la solucion:
    Me tocó subirlo a un documento de Word para compartirlo contigo
    aqui está
    https://drive.google.com/file/d/1XPrNnCoSoj2Cs81TSvhIZVmcesUKyGDo/view?usp=sharing
    Espero tu opinion

    ResponderEliminar
  29. Gracias mil!!! ME funciono mil TQM! Saludos Cordiales! Quedo POCA MADRE! Quedo de ti....

    ResponderEliminar