miércoles, 30 de mayo de 2007

Jugando con la Navbar 4 (ocultar/mostrar con Scriptaculous)

Con los experimentos anteriores, se me ocurrió una manera mucho mas elegante para ocultar y mostrar la Navbar, usando dos Framework de JavaScript: Scriptaculous y Prototype.

Se deben agregar dos eventos al div del Navbar: MouseOver para detectar la presencia del mouse sobre (over) la Navbar, y MouseOut para detectar el momento en que el mouse se mueve fuera (out) del div de la Navbar. Estos dos eventos haran aparecer y desaparecer gradualmente la Navbar, quedando mas o menos así...


acerca el mouse aquí abajo para que aparezca la imagen y alejalo para que desaparezca.



El código para hacer esto con la Navbar, es el siguiente:

function navbarShow() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}

function navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}

function navbarHack() {
Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
navbarHide();
}

Event.observe(window, 'load', navbarHack, false);


Aqui hay dos instrucciones clave: La Event.observe(ELEMENTO, EVENTO, ACCION, false) de Prototype, asigna la funcion ACCION al evento EVENTO del elemento u objeto ELEMENTO, osea cuando ocurra el EVENTO de ELEMENTO se ejecutará ACCION; y la Effect.Opacity(ELEMENTO, PARAMETROS) de Scriptaculous, que hace un fade o transformación gradual desde (from) un nivel de opacidad hasta (to) otro en un tiempo determinado (duration); la opacidad 1.0 significa 100% visible y 0.0 significa 0% visible, podrias cambiar el 1.0 por 0.5 para tener la Navbar semi-translúcida o lo dejas en 1.0 y agregas el codigo CSS que hay en Jugando con la Navbar 2 (opacidad); con respecto a la duración (duration) del efecto, se mide en segundos, osea ese 0.5 significa medio segundo.

Si no entendiste nada te lo doy fácil...

En el "panel" de tu blog vas a "Plantilla" y luego a "Edición HTML" y, en el recuadro donde esta el código de tu plantilla buscas la linea que dice "</head>" (casi al final) y, agregas el siguiente código justo arriba de esa linea (sin borrarla obviamente):

<script src='http://wiki.script.aculo.us/javascripts/prototype.js' type='text/javascript'/>
<script src='http://wiki.script.aculo.us/javascripts/scriptaculous.js?load=effects' type='text/javascript'/>

<script type='text/javascript'>
function navbarShow() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}

function navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}

function navbarHack() {
Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
navbarHide();
}

Event.observe(window, 'load', navbarHack, false);
</script>


Has una "Vista Previa" y si esta todo bien guardas los cambios.

Viene desde: Jugando con la Navbar 3 (ocultar/mostrar)

11 comentarios:

Michael dijo...

Excelente truco!
Saludos.

Parablogs dijo...

Muy buen tip. Quise crear un vinculo a esta entrada pero falla.. por eso te dejo este comentario para avisarte que publique tu tip en www.parablogs.com.ar .
Deje al final del post tu autoria.

Saludos

Eduardo Aguila dijo...

Hola ta muy bueno el truco , deberías volver a postear

Luiky dijo...

hola

bueno antes que nada decirte que el truco esta fantastico, tengo una pregunta que hacerte aunque no es del tema este concretamente aunque esta relacionado.

Mira amigo, me descargue una plantilla personalizada, pero al ponerla me di cuenta de que el navbar no aparece arriva, me gustaria saber si se podria hacer aparecer con esta plantilla o no

gracias tio y enhorabuena por el blog

hodavame dijo...

Hola Luiky

La plantilla que descargaste ya tiene el código para ocultar la navbar.

Para recuperarla, busca lo siguiente en el código de la plantilla y borralo:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Así volverás a tener la navbar tal como es originalmente y podrás hacerle los cambios que quieras.

;)

Luiky dijo...

muchas gracias, ya me aparece una barra, extrañamente blanca xD, aora tengo otra duda, e copiado el codigo justo encima de /head pero la barra se keda en su sitio totalmente opaca con y sin mouse encima

hodavame dijo...

Hola

Revise tu blog pero no vi el código por ninguna parte. Si quieres coloca el código aunque no funcione y me avisas para revisar si esta bien o por que no funciona.

Otra manera fácil de hacerlo, es colocar trozo del código javascript en un archivo aparte e incluir ese archivo en el código del blog... yo lo hago así:

...El código (el primero) lo puse en un archivo .js, lo subí a un webhosting cualquiera (googlepages) y lo incluyo en la plantilla del blog antes del /head de la siguiente manera...

<script src='http://hodavame.googlepages.com/navbar.js' type='text/javascript'/></script>

Ahí "navbar.js" es el archivo que tiene el código.

Cualquiera de esas dos formas te sirve... si ninguna te resulta, me avisas, yo lo reviso y te digo cual es el problema.

si quieres me escribes a...
@gmail.com

;)

╬VC-Corpsegrinder╬ dijo...

Hola hermano como estas? Espero que bien... Oye no me sirvio tu codigo.. la barra sique exactamente igual en su posicion y no se oculta... espero y me puedas ayudar carnal... este es mi blog:
http://the-metal-zone.blogspot.com/

Espero y me puedas ayudar... saludos y muchas gracias!

Koizumi Mio dijo...

A mi no me funciono TT^TT

Administrador dijo...

Hola! Podrias mas o menos decirnos como hiciste para que la barra de navegacion de tu blog desaparezca cuando se aleja el mouse? POr favor es muy importante que compartas tus conociemientos. Un Abrazo!

hodavame dijo...

En esta página dice todo lo que yo hice para que la barra se comporte tal como la tengo ahora.

:)