Texto en movimiento en la barra de estado

  • Por
Veamos un sencillo script para hacer que se mueva un texto por la barra de estado de nuestro navegador.
Vamos a ver en este artículo cómo hacer para que se mueva un texto por la barra de estado de nuestro navegador. Es un script bastante sencillo y también bastante corriente. Sin duda puede resultar fácil tomar el script, copiarnoslo en nuestra página y hacerlo funcionar, pero nosotros vamos a procurar una explicación para que todo quede más claro y entendamos un poco lo que estamos haciendo.

Este script va a crear un texto que se movera de derecha a izquierda por la barra de estado. Se puede ver en la página de ejemplo. Ahora veamos los distintos pasos.

1. Defino unas variables iniciales

El script puede mover el texto que nosotros deseemos y para configurarlo se ha de crear una variable que hemos llamado texto_estado donde introduciremos nuestro texto.

var texto_estado = "            Bienvenidos a mi pagina web"

Notemos que se han introducido unos espacios antes que el texto. Son para que se cree un espacio en la barra de estado entre la salida del texto y la entrada de este por el otro lado. El número de espacios en blanco se puede modificar libremente, así como el texto que se muestra.

También será necesario crear una variable llamada posicion donde vamos a guardar la posición del texo en la barra de estado.

var posicion = 0

2. Función para mover el texto

Ahora vamos a ver la función, a la que llamaremos mueve_texto(), que se encarga de mover el texto por la barra de estado. Entender esta función puede ser un poco complejo si no se conoce un poco el lenguaje Javascript. En cualquier caso, podemos también copiarla y pegarla en nuestras páginas aunque no la consigamos entender. Realiza cuatro acciones básicas:
  • Mueve la posición actual, actualizando la variable posicion. Si hemos llegado al final de la cadena se vuelve al principio 
    if (posicion < texto_estado.length)
        posicion ++;
    else
        posicion = 1;

  • Crea una cadena a partir del texto original. La cadena creada contiene el texto que hay desde la posición actual hasta el final concatenado al que hay desde el principio hasta la posición actual. Este es el paso que realmente genera el movimiento, porque va cambiando la cadena que luego escribiremos a medida que la posición también cambia.
    string_actual = texto_estado.substring(posicion) + texto_estado.substring(0,posicion)
  • Escribe la cadena resultante de la operación anterior en la barra de estado.
    window.status = string_actual
  • La función se llama a si misma para continuar el movimiento. Para ello se utiliza una función muy socorrida, setTimeout(), que sirve para ejecutar una sentencia con un retardo de tiempo. La función recibe la sentencia para ejecutar (que en este caso es una llamada a esta misma función) y el número de milisegundos que tiene que esperar para ejecutarla, en este caso 50.
    setTimeout("mueve_texto()",50)

La función entera tiene este código:

function mueve_texto(){
   if (posicion < texto_estado.length)
       posicion ++;
   else
       posicion = 1;
   string_actual = texto_estado.substring(posicion) + texto_estado.substring(0,posicion)
   window.status = string_actual
   setTimeout("mueve_texto()",50)
}


3. Llamamos a la función

Para empezar a mover el texto por la página tenemos que realizar una llamada a la función que se encarga de ello. Será más claro el código de la página si colocamos la llamada a la función después de que haya sido definida, aunque no es obligatorio.

mueve_texto()

4. Todo junto

Para acabar, podemos observar a continuación el código entero de una página web que mueve texto por su barra de estado. Es una página bastante sencilla después de todo.

<html>
<head>
   <title>Texto en la barra de estado</title>
   <script language="javascript">
   //texto del mensaje
   var texto_estado = "        Bienvenidos a mi pagina web"
   var posicion = 0
   
    //funcion para mover el texto de la barra de estado
   function mueve_texto(){
      if (posicion < texto_estado.length)
         posicion ++;
      else
         posicion = 1;
      string_actual = texto_estado.substring(posicion) + texto_estado.substring(0,posicion)
      window.status = string_actual
      setTimeout("mueve_texto()",50)
   }
   mueve_texto()
   </script>
</head>

<body>
<h1>Ejemplo de script con un texto en la barra de estado</h1>

</body>
</html>


Se puede ver el ejemplo en funcionamiento.

5. Otro ejemplo

Dependiendo del script que utilicemos para mover el texto de la barra de estado conseguiremos unos efectos u otros. A continuación podemos ver un segundo ejemplo sobre cómo mover un texto por la barra de estado utilizando un efecto de movimiento distinto.

No vamos a comentar este segundo ejemplo porque ya se encuentra comentado en el propio código fuente, pero podremos ver que es muy parecido al anterior.

<html>
<head>
   <title>Segundo ejemplo de texto en movimiento</title>
</head>

<body>
<h1>Texto en movimiento en la barra de estado</h1>
<h2>Ejemplo 2</h2>

<script language="javascript">

//variable con el texto a mostrar
var texto = "Bienvenidos a mi pagina web!!!"
//variable con la posicion en el texto. poner siempre a 0
var pos = 0

//creo una funcion para cambiar el texto de la barra de estado
function textoEstado(){
   //incremento la posicion en 1 y extraigo el texto a mostrar en este momento.
   pos = pos + 1
   textoActual = texto.substring(0,pos)
   //pongo el texto que quiero mostrar en la barra de estado del navegador
   window.status = textoActual
   //Llamamos otra vez a esta funcion para que continue    mostrando texto
   if (pos == texto.length){
      //si hemos llegado al final, vuelvo al principio y hago un retardo superior
      pos = 0
      setTimeout("textoEstado()",1500)
   } else{
      //si no hemos llegado al final, sigo con la funcion con un retardo minimo.
      setTimeout("textoEstado()",100)
   }
}

//llamo a la función para poner el texto en movimiento
textoEstado()
</script>


</body>
</html>

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Borja Flores

24/4/2003
Otro efecto interesante para el Status es éste:

<SCRIPT language=JavaScript1.2>
<!--
//Texto Animado En Barra De Estado
    var text = "TEXTO DE BARRA DE STATUS QUE SE QUIERA "
    var speed = 150
    var x = 0
   function bb()
       {
       var a = text.substring(0,x)
       var b = text.substring(x,x+1).toUpperCase()
       var c = text.substring(x+1,text.length)
       window.status = a + b + c
       if (x == text.length)
          {
          x = 0
          }
       else
          {
          x++
          }
       setTimeout("bb()",speed)
       }
    bb();

<!--

<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
       document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
//-->

function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
}
//-->
</script>


probadlo, es interesante


Saludos,

Borja Flores Mateo

Jonathan García

24/9/2005
tengo otro efecto, espero que sea de vuestro agrado.

<!--Incia el efecto 1 para colocar texto animado en la barra de estado -->
<script language="javascript">
var texto_estado = " Bienvenido a mi página web "
var posicion = 0

function mueve_texto(){
if (posicion < texto_estado.length)
posicion ++;
else
posicion = 1;
string_actual = texto_estado.substring(posicion) + texto_estado.substring(0,posicion)
window.status = string_actual
setTimeout("mueve_texto()",100)
}
mueve_texto()
</script>

abbad

15/4/2009
no lo veo moverse
hola desarrolloweberos, gran pagina.
en los ejemplo de texto en movimiento en la barra de estado mi texto no se mueve (ni siquiera aparece, no se si sea el navegador (uso mozilla) pero tambien lo intente en el internet explorer (de mi misma compu) y no. lo q mencionan, no se si tenga q ver algo la version pero voy a intentarlo en el netscape.
de mexico saludos a todos

ToniPHP

15/4/2009
Este script no funciona
Es que esto del texto en movimiento en la barra de estado es una cosa muy arcaica... ya no funciona muy bien, porque los navegadores han protegido contra escritura el texto de la barra de estado por razones de seguridad.

Tony

19/2/2010
Es posible poner la fecha y hora en formato DD/MM/AA HH:MM en la barra de estado?
He probado poner fecha y hora concatenado con un texto y no me funciona.

fernando figueroa

17/7/2010
no sirve ese codigo con el window.status=string;
por qué no me sirve a mi, lo copio y no funciona para nada