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



   Texto en la barra de estado
   

Ejemplo de script con un texto en la barra de estado


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.



   Segundo ejemplo de texto en movimiento

Texto en movimiento en la barra de estado

Ejemplo 2