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)