> Manuales > Taller de Javascript

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:

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>

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual