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)

Jugando con la Navbar 3 (ocultar/mostrar)

Para ocultar y mostrar la Navbar automáticamente según la posición del mouse; o mejor dicho, mantener oculta la Navbar y mostrarla cuando se coloca el mouse en parte superior de la pagina, conozco dos métodos, uno con CSS puro y otro con Javascript y CSS

El método CSS puro lo aprendí en Recursos Blog & Web, en el artículo Ocultar la barra Blogger (navbar) automáticamente. Es muy fácil, solo tienes que agregar el siguiente código en tu plantilla (Edición HTML) justo antes de la linea que dice "</head>" (casi al final).

<style type="text/css">
#navbar-iframe {
  opacity: 0.0;
  filter: alpha(Opacity=0)
}

#navbar-iframe:hover {
  opacity: 1.0;
  filter: alpha(Opacity=100,FinishedOpacity=100)
}
</style>

Este código fija la opacidad del div cuyo id es "navbar-iframe" en un 0%, osea “invisible” y cuando el mouse esta sobre (hover) este div, le da una opacidad de 100%, osea “totalmente visible”. Puedes usar este código junto con el que hay en Jugando con la Navbar 2 (opacidad) para tener una Navbar semi-translúcida que se oculta/muestra automáticamente; o mejor aun, le puedes hacer una modificación para conseguir el mismo efecto:

<style type="text/css">
#navbar-iframe {
  opacity:0.0;
  filter:alpha(Opacity=0)
}

#navbar-iframe:hover {
  opacity: 0.5;
  filter: alpha(Opacity=50,FinishedOpacity=50)
}
</style>

El otro método, con Javascript y CSS es bastante mas complejo, pero quiero mencionarlo de todas maneras. Este código lo extraje de Blogger Hacked y le hice pequeñas modificaciones. Con este método se consigue lo mismo que con el anterior, pero este lo consigue agregando eventos mouseover y mouseout al div “navbar”, para detectar la presencia del mouse y aplicar un estilo CSS que hace visible o invisible el div según corresponda.

<style type="text/css">
.navbar-show {
  filter:alpha(opacity=50);
  opacity:.5;
  -moz-opacity:0.5;
}

.navbar-hide {
  filter:alpha(opacity=0);
  opacity:0;
  -moz-opacity:0.0;
}
</style>

<script type='text/javascript'>
function show_navbar() {
  var nbar=document.getElementById ("navbar");
  nbar.className="navbar-show";
}

function hide_navbar() {
  var nbar=document.getElementById("navbar");
  nbar.className="navbar-hide";
}

function navbar_hack() {
  var nbar=document.getElementById ("navbar");
  nbar.className="navbar-hide";
  if (nbar.addEventListener) {
    nbar.addEventListener ("mouseover",show_navbar,false);
    nbar.addEventListener ("mouseout",hide_navbar,false);
  } else if (nbar.attachEvent) {
    nbar.attachEvent ("onmouseover",show_navbar);
    nbar.attachEvent ("onmouseout",hide_navbar);
  } else {
    nbar.onmouseover = show_navbar;
    nbar.onmouseout = hide_navbar;
  }
}

function addLoadEvent(func) {
  var old = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      old();
      func();
    }
  }
}

addLoadEvent(navbar_hack);
</script>

Aaaahhhhh!!! es muuucho mas complejo!!! pero quise mencionarlo porque este código me dio la idea para el siguiente método, que es le mejor de todos y es mucho mas elegante...

Viene desde: Jugando con la Navbar 2 (opacidad)
Continua en: Jugando con la Navbar 4 (ocultar/mostrar con scriptaculous)

Jugando con la Navbar 2 (opacidad)

Después de pensarlo bien, encontré que era demasiado drástico "eliminar" la Navbar ya que puede ser bastante útil si se sabe ocupar, así que me puse a buscar ideas sobre como podría hacer que la Navbar se adaptara al estilo del blog o que por lo menos no fuera tan llamativa... fue así como llegue a un blog del que extraje dos métodos, hacerla semi-translúcida y ocultarla/mostrarla según la posición del mouse.

Hacer semi-translúcida la Navbar consigue un efecto que logra asemejar el color de la Navbar al color de fondo del blog. En mi caso, con la Navbar negra y fondo del blog verde, al definir una opacidad media para el div de la Navbar, esta se vera de un color verde oscuro.

Antes

Después


Para lograr esto se debe agregar el siguiente código css a la plantilla.

#navbar {
  filter: alpha(opacity=50);
  opacity: .5;
  -moz-opacity: 0.5;
}

El "filter", "opacity" y "-moz-opacity" intentan fijar la opacidad del div cuyo id es "navbar" en un 50%, osea que la Navbar sera un 50% translúcida.

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

Para hacer la Navbar semi-translúcida, 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):

<style type="text/css">
#navbar {
  filter: alpha(opacity=50);
  opacity: .5;
  -moz-opacity: 0.5;
}
</style>

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

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

Jugando con la Navbar 1 (ocultar)

Este es el primero de varios Tips para la Navbar.

Mientras creaba este blog, revisé las plantillas de blogger y la que mas me gusto fue "Rounders 4" por el color verde... me gusta el color verde en todos sus tonos.

Teniendo todo listo, pude ver al fin mi blog funcionando y note que arriba había una barra negra que desentonaba completamente con los verdes de la plantilla... la Navbar.

En la "Configuración de Navbar" solo habían 4 "temas" disponibles; Azul, Canela, Negro y Plateado. Después de probarlos todos me pareció que ninguno se veía relativamente bien.

Mi primer impulso fue... "hay que sacarla!", entonces revisé el código fuente de la página y encontré una linea que decía:

<div class='navbar section' id='navbar'>

Entonces en la pagina de configuración del blog, fui a "Plantilla", "Edición HTML" y en la sección donde esta el css (entre <b:skin> y </b:skin>) agregué:

#navbar {
  display: none;
}

Para los que no saben css, ese "display: none" significa que no se mostrara el div cuyo id es "navbar". Investigando mas sobre el asunto, encontré muuuchos otros blog que también han eliminado la Navbar y la mayoría usan:

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

Ese código da mayor compatibilidad con navegadores. El "height", "visibility" y "display" intentan ocultar el div cuyo id es "navbar-iframe" (este div esta dentro del div "navbar").

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

Para quitar (ocultar) la Navbar, 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):

<style type="text/css">
#navbar-iframe {
  height:0px;
  visibility:hidden;
  display:none;
}
</style>

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

Continúa en: Jugando con la Navbar 2 (opacidad)

Por que?

Por que un blog?

Muchas veces he querido hacer esto.

Muchas veces he necesitado decir al mundo lo que me esta pasando, lo que quiero hacer, lo que me gusta, lo que odio. Muchas veces he querido tener un espacio en alguna parte para hablar sobre mis pequeños logros, y dar la receta completa de como lo he conseguido para que otros también puedan hacerlo.

Soy un completo ignorante en lo que se refiere a blogs y necesito aprender... me gusta por lo menos tener nociones básicas sobre cada cosa, me angustia no saber nada sobre algún tema, pero mas me angustia no tener tiempo suficiente para aprender todo sobre todo.

No esperen grandes y poéticos mensajes, ni fabulosas historias con moraleja incluida; soy un hombre de pocas palabras, cuando digo algo es por que me parece realmente importante.


H.