Cristalab

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

Por: M@U + 15.09.2007

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

Etiquetas javascript hack

Comentarios | Enviar un comentario
Buen tip M@U. Thumbs up
Por: Carloz.Yanez
hostia, estamos devuelta en 1997? Aw Crap
Por: Ranco
EL cambiar la Barra de título puede tener buenos usos, como en el caso de Gmail o Google Reader, pero la verdad verlo con animación me parece infantil.
Ranco no te desesperes que ya vienen tips acerca del tag Marquee y también como hacer rosa tu scrollbar (para IE solamente) Riendo Riendo
Por: zickedhelik
No sabia que ese era tu tip, por que el nombre de la función: function rotulo_title() la he visto en otro sitio web de las fuerzas armadas o en una isla ejejeje no me acuerdo Riendo.

Aunque no lo he probado tal vez sea algo distinto BOFH Riendo.
Por: enjoydasilence_blog
mmm... tiene efecto ondulacion? .:*|-_-|*:.
Por: enjoydasilence_blog
PD: me has dejado asustado con el rotulo_titulo..... tu no serás.....mmmmm


pucha que palta.
Por: enjoydasilence_blog
Como bien han dicho por aqui, parece que estemos de vuelta a 1997, estos metodos estan desfasados, desaconsejados y en desuso, ademas se considera poco profesional. No recomiendo utilizar lo que pone en este tip.

Y eso de que el javascript debe de ir despues del body, es un error, deberia ir siempre todo el codigo que hagas en el <head>, esta totalmente desaconsejado mezclar javascript con etiquetas HTML dentro del body.

Por favor, pensaos antes escribir un tip, si realmente es bueno o malo, lo que estais haciendo.

Salu2
Por: Uno de tantos_blog

zickedhelik :

EL cambiar la Barra de título puede tener buenos usos, como en el caso de Gmail o Google Reader, pero la verdad verlo con animación me parece infantil.
Ranco no te desesperes que ya vienen tips acerca del tag Marquee y también como hacer rosa tu scrollbar (para IE solamente) Riendo Riendo
Lo de personalizar la scrollBar y otras funciones, las iva a postear despues... Ya que solo en IE esta por defecto la opcion de cambiarle de color, entre otras cosas, pero primero quiero encontrar una manera en FireFox y otros navegadores !!!...

Volviendo al tema: estoy de acuerdo en que su uso, ya paso de "moda"... Y en lo personal, no me parece un cambio profesional para una web... Pero como ya mencione todo depende de las circunstancias y buen uso que le puedas dar ( Ya que no siempre va a encajar con el estilo o diseño de tu web... )...

Por ultimo, Uno de tantos_blog, estoy de acuerdo en que nunca es bueno el mezclar Java con HTML, CSS u otros lenguajes... Pero en este caso, ninguno de los ejemplos anteriores surgiran efecto alguno en <head>, a menos de que los modifiques...

    Saludos !!!... Y espero sus criticas en futuro...

Por: M@U
No sé si M@u mencionara antes de comenzar el tip, que a continuación presentaría unos buenos tips para poner el efecto "tan de moda en estos últimos días" de agregarle dinamismo a la barra de estado o a la de título, no sé si estoy mal pero creo que en ningún momento mensionó tal cosa, no creo que él(ella)(¿podrías aclarar tu género de sexo M@u? Gracias) estuviera intentando mostrar algo nuevo o irrelevante, más bien considero que estaba intentando ilustrarnos a los que sabemos menos, con un poco más del poder de Javascript en los documentos HTML, no entiendo por que las personas que "al parecer" tienen mayores conocimientos que uno, creen que son los únicos que cuentan aquí, se agradece que aclaren que eso es poco recomendado, por supuesto que también sus consejos son bien recibidos por, insisto, los que menos sabemos, sin embargo, de eso a que digan que su voluntad o su creencia también es lo único, pues no creo que esté bien, en ningún momento se menciona que sea completamente contraproducente utilizar ese tipo de cosas en un documento HTML, supongo que ademas de que algunos cuantos lo consideran poco profesional, desfasados y en desuso, no atrae junto con ello ningún otro tipo de consecuencias, ¿O sí? Además de que creo que este tipo de opiniones son bastante mas subjetivas que objetivas, es decir, a criterio de cada quien, muchos pueden considerar poco profesional usar flash porque no todos los ordenadores lo tienen, (se que es casi el cien porciento de los ordenadores quienes lo tienen, pero aun no es el cien y mientras no sea el cien, obvio que se puede decir que no todos los ordenadores lo tienen) por lo tanto, muchos pueden considerar utilizar flash como algo poco profesional y en desuso (recuerden cuantos años lleva flash en el mercado), sin embargo, hay quienes les dirán a los que piensas así que si están locos o algo parecido por afirmar tal cosa, como dije hace rato, ese tipo de pensamientos están más en el terreno de lo subjetivo, ¿por qué mejor no aportan una idea distinta, y no solo se limitan a críticas que puede que no den mucho resultado? Sería mas productivo para todos, lo digo con respeto hacia todos los que han hecho comentarios de cualquier tipo.
Gracias M@u por el tip, me resulta extremadamente interesante ver las características de Javascript, sigue aportando temas de este lenguaje, no importa que esten pasados de moda, imagina tú que dejaran de enseñar historia porque ya es cosa del pasado, que horroooor.
Por: Señor Oz_blog
Muchas gracias por el comentario Señor Oz !!!...
Y admito que se me olvido poner mi objetivo del post original ( enseñar un poco a quienes no sabian... ):...

Hace un tiempo, M@U :

Estaremos de acuerdo en que aqui todos sabemos algun Tip o Truquillo que utilizen en su pagina, blog, etc. Por lo que esperaba ver si se animan a publicar alguno de ellos ( sea cual sea este... )... Si no es asi, con gusto muestro los que conozco:...

  • Ventajas: Entre otras podriamos instruir a quienes menos saben, y tener una especie de enciclopedia donde podamos ver estos trucos facilmente... O hasta aprender mas !!!...
Riendo
Finalmente, aclaro que soy varón !!!... Y que siempre ha estado ahi mi genero, junto al nick...
Por: M@U

Lo de personalizar la scrollBar y otras funciones, las iva a postear despues... Ya que solo en IE esta por defecto la opcion de cambiarle de color, entre otras cosas, pero primero quiero encontrar una manera en FireFox y otros navegadores !!!...

Con una hoja de estilo se debe poder personalizar todo lo referente a la página, pero no al navegador. Cambiar el color de los scrollbars es una muy mala practica. ( Además era un sarcasmo lo de que postearas algo de eso U_U )


Volviendo al tema: estoy de acuerdo en que su uso, ya paso de "moda"... Y en lo personal, no me parece un cambio profesional para una web


No es tanto cuestion de modas... es que despues de sufrir tantos años los marquees , los desarrolladores los detestan. Y tienen razón. De hecho, la barra de titulos y la statusbar son para eso: Mostrar titulos y estados de la pagina, asi que no es bueno estarle cambiando eso al usuario. Además, firefox y otros browsers no te dejan cambiar el statusbar (so, es una mala practica hacerlo)

El cuento es que si quieres mostrar algo adicional en tu pagina, lo debes hacer dentro de ella: Por cuestiones de accesibilidad, usabilidad, etc, el navegador no debe ser controlado por la pagina.

M@U: Admiro tus ganas de colaborar. Me parece genial que colabores con la gente haciendo tips. Lo único que pienso es que este tipo de practicas son malas (y es comprobado), asi que ... evitemos usarlas.

Señor Oz: Hum... en algun sentido tu comentario me hizo pensar lo de el aprendizaje de Javascript. Todos los que comenzamos a trabajar Js usamos alguna vez esos (horribles Riendo ) codigos de marquees en los titulos. Sin embargo, siempre debemos pensar el Javascript del modo más accesible posible, y estos metodos no son muy bonitos o comodos para el usuario Muy Feliz

Un saludo, sin animo de ofender Riendo
Por: Lunatic_blog
hola yo estoy de acuerdo con tigo en todo y te comprendo espero no te desesperes mi correo es soner_viga@hotmail.com espero poder seguir platicando de esto con tigo bey
Por: sonia cortes sanchez_blog
Otro tip de antaño por Dios!
Y recontra fuera de lugar con todo lo que hay ahora para web
que pasa en CLAB! no chekean los posts de la gente antes de publicarlos?! Aw CrapAw CrapAw Crap
Por: carlosczg_blog
Que malos comentarios, de aquellos dinosaurios. puesto que existimos algunos quenos entretenemos y jugamos con este tipo de tips, que en algun caso, alguna ves nos podrian servir. y pues que bien que se explique lo que usaban en su explorador de win 95. pero en el IE7 pienso probarlo, pues en la pestaña, no cabe el titulo de mi pagina completo, y esto de mover el texto puede ser uti. conecten el cerebro con lo que escribe, y no solo las tripas, gracias
Por: the_eye_blog
hola buenos dias

Me gustaria saber el codigo en java script para que se ponga automaticamente en negrita Ej Hay un error grave que error se ponga automaticamente.
Si alguien sabe como se hace os pide que me lo digais.

Muchas gracias

Un saludo

Carlos
Por: Carlos_blog
que asco de decoraciones son super complicate (complicadas y muy anticuadas) bueno en realidad no son complicadas pero como a muchos no me gusta es muy infantil Sonrisa Muy Feliz Riendo Triste Triste Guiño
Por: rosemary_blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.