Comunidad de diseño web y desarrollo en internet online

Crear efectos en la Barra de título y estado con Javascript

Siempre es posible el cambiar la barra de estado de tu navegador, ¿Para que? Pues la verdad no lo se, es un bonito y llamativo detalle, todo depende del buen uso que le puedas dar, por ello, voy a mostrar varias maneras de cambiar la barra de estado de nuestra web, por una mucho más dinámica.
NOTA: Recuerda que todos los códigos van después de la etiqueta <body>

Con el siguiente código podremos hacer que un mensaje pase por la barra de estado, como si fuera marquesina.

Código :

<script type="text/javascript">var cuenta = 0
var texto =" El C_C es bueno."
function scrolltexto () {window.status=texto.substring (cuenta,texto.length)+ texto.substring(0,cuenta)
if (cuenta <texto.length){cuenta ++}else{cuenta=0}
setTimeout("scrolltexto()", 150)}
scrolltexto()
</script>

NOTA: Solo cambia el texto que se va a desplazar por el que mas te guste, en este caso es "El C_C es bueno.". Y si quieres cambiar la velocidad del desplazamiento (Opcional. ), vamos a cambiar el "150", por el numero que desees ( Entre mayor sea el numero, mas rápido va a desplazarse. ).

Pero si quieres un detalle diferente. Por que no un reloj ¿?.

Código :

<script language="JavaScript">
mensaje="clabTime. " 
function hora() {var h = new Date();   
        window.status=" "+h.getHours() +":"+ h.getMinutes() +" "+mensaje ; 
        window.setTimeout('hora()',100);}  hora();
</script>

NOTA: Solo cambia el clabTime., por el mensaje que quieras que aparezca.

Si de plano no te convenció ninguna de las dos anteriores. Puedes mezclarlas, es decir un mensaje personalizado seguido de la hora.

Código :

<script type="text/javascript">var cuenta = 0
var hora = new Date();
horaCompleta=" "+hora.getHours() +":"+ hora.getMinutes() +" hrs";
var texto ="         El servicio clabieDater te indica que son las " + horaCompleta + "                    "
function scrolltexto () {window.status=texto.substring (cuenta,texto.length)+ texto.substring(0,cuenta)
if (cuenta <texto.length){cuenta ++}else{cuenta=0}
setTimeout("scrolltexto()", 200)}
scrolltexto()
</script>

NOTA: Al igual que en los ejemplos anteriores, solo tienes que cambiar "El servicio clabieDater te indica que son las" por el texto que tu desees.

Efectos para la Barra de Titulo


Al igual que en la Barra de Estado, podemos hacer el efecto de la marquesina con la Barra de Titulo, tan solo agregando después de <body> el siguiente código.

Código :

<script language="JavaScript">
var var txt="            Clab            -              Cristalab.com            -";
var espera=200;
var refresco=null;
function rotulo_title() {
        document.title=txt;
        txt=txt.substring(1,txt.length)+txt.charAt(0);
        refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</script>

NOTA: Solo cambia el contenido de " var txt " por el que quieras que se desplace en el titulo.

Por defecto, en Firefox esta inhabilitado el cambio de la barra de estado con Javascript. Por ello estos códigos no surgen efecto alguno. En cambio IE ya tiene por defecto la configuración de cambio de status con javaScript.

Si deseamos cambiar la configuración de Firefox para que permita hacer cambios en la barra de estado tenemos que entrar en Herramientas > Opciones > Contenido > Activar Javascript >Avanzado y seleccionar la opción del checkbox “cambiar texto de la barra de estado”.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate