Hace rato que estoy usando Windows 7 como sistema operativo principal, y debo decir que APESTA tanto o más que Windows Vista, pero dejando de lado eso, en esta oportunidad les traigo un efecto bastante atractivo inspirándome en la nueva “super barra de tareas” de Windows 7.

El efecto consiste en “una luz que sigue al mouse” mientras lo movemos sobre el botón, algo que no se puede apreciar en la siguiente imagen, pero que si lo podemos hacer con la demo.

6, 7, 8

3.0, 3.5

3

4

Creando la maqueta

La idea es la siguiente:

<span class="win7">
  <div></div>
  <a href="#">Button</a>
</span>

Pero para no ensuciar tanto el código HTML que tenemos que crear cada vez que queremos un botón, vamos a crear ese div por medio del javascript, de manera que nuestro código html real será el siguiente:

<span class="win7"><a href="#">Button</a></span>

CSS Code

.win7
{
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  font-size:12px;

  position:relative;
  float:left;
  height:29px;
  width:100%;
  background:url('../images/nav-bg.png') repeat-x top left;
}

.win7 div
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:29px;
  background:url('../images/active1.png') no-repeat center;
  z-index:0;
}

.win7 a
{
  line-height:29px;
  text-align:center;
  display:block;
  position:relative;
  padding:0 25px;
  z-index:2;
}

Ahora vamos a darle bordes redondeados:

span.win7
{
  width:auto;
  overflow:hidden;

  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;

  border:2px solid #deded2;
}

MooTools code

Iniciamos siempre despues de cargar el dom:

window.addEvent('domready', function() {

    if (Browser.Engine.trident4) {
      try { document.execCommand("BackgroundImageCache", false, true); }
      catch(err) {}
    }

Ahora vamos a recorrer el DOM en busca de todos los enlaces con la clase “win7″, y a cada enlace le agregamos el “div” y le asignamos el evento “mousemove” ajustando la posición del background relativo al mouse:

    $$('.win7 a').each(function(el) {

      el.win7BG = new Element('div', {'styles':{'opacity':0}}).injectBefore(el);
      el.win7BG.set('morph', {'duration':300});

      el.addEvent('mousemove', function (ev) {
        el.win7BG.setStyle('background-position', - ((600/2) - (ev.event.layerX||ev.event.offsetX||0))+'px top');
      });

Lo siguiente es para agregarle el efecto “fade”, aunque no es el objetivo principal de este artículo, queda muy bonito:

      el.addEvent('mouseenter', function (ev) {
        el.win7BG.morph({'opacity': 1});
      });

      el.addEvent('mouseout', function (ev) {
        el.win7BG.morph({'opacity': 0});
      });

    }); // end each

}); // end domready

Lo instalamos en nuestra página, agregando el siguiente código en el HEAD:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>

<script type="text/javascript" src="js/win7.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />

(acomoda las rutas a tu conveniencia).

jQuery code

Hacemos lo mismo que en mootools, sólo que con código de jQuery:

$(document).ready(function(){

  if ( document.all && !window.opera && !window.XMLHttpRequest && $.browser.msie ) {
    // stupid jquery ie6 detection
      try { document.execCommand("BackgroundImageCache", false, true); }
      catch(err) {}
  }

  $('.win7 a').each(function() {
    var el = $(this);

    el.win7BG = $(document.createElement('div')).css({'opacity': 0});
    el.win7BG.insertBefore(el);

    el.mousemove(function(ev) {
      el.win7BG.css({'background-position' : -((600/2) - (ev.originalEvent.layerX||ev.originalEvent.offsetX||0))+'px top'});
    });

    el.hover(
      function() {
        el.win7BG.stop().animate({'opacity':1},300);
      },
      function() {
        el.win7BG.stop().animate({'opacity':0},300);
      }
    );

  });
});

Lo instalamos en el HEAD de nuestra página:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/win7.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />

(acomoda las rutas a tu conveniencia).

Creando los Botones y el Menu

Para crear un menu:

<ul class="win7">
  <li><a href="#">Home</a></li>
</ul>

Para crear un botón:

<span class="win7"><a href="#">Button</a></span>

He agregado más clases con diferentes colores que puedes ver en la demo, pero la técnica sigue siendo la misma.

Demo

Puedes ver la demo en mootools como la demo en jQuery.

Les dejo un pedazo de código para ‘forzar’ el estilo de un elemento. El problema con el que me topé al crear SexyForms fue forzar los estilos mios a un elemento que ya tenía estilos puestos por el autor.

El problema

Veamos un ejemplo:

<style>
.red{
  color: red;
}
</style>
<input type="text" id="nombre" class="red"/>

Desde un script externo yo podría hacer lo siguiente:

$('nombre').erase('class');
$('nombre').addClass('blue');

De esa manera, sobrescribimos el estilo por el nuestro, mostrando el color del texto en azul. Pero el script anterior no funcionará en el siguiente caso:

<style>
input#nombre{
  color: red;
}
</style>
<input type="text" id="nombre" />

Y esto es porque input#nombre tiene mucho más peso que nuestra clase ‘blue’.

La solución

Element.implement({
  ForceClass: function(param) {
    if (!$('mooForceClass')) {
      document.body.adopt(new Element("force", { 'id' : 'mooForceClass' }));
    }
    var mooForceClass = $('mooForceClass');
    mooForceClass.erase('class');
    mooForceClass.addClass(param);
    var Styles = mooForceClass.getStyles('left', 'top', 'bottom', 'right',
    'width', 'height', 'color', 'line-height', 'margin', 'padding',
    'text-indent', 'text-transform', 'z-index', 'text-decoration',
    'vertical-align', 'position', 'display', 'visibility', 'overflow',
    'float', 'clear', 'cursor', 'background', 'list-style',
    'border-style', 'border-weight', 'border-color', 'font-family',
    'font-size', 'font-weight', 'font-style', 'border-color',
    'border-weight', 'border-style');
    mooForceClass.erase('class');
    return this.setStyles(Styles);
  }
});

Lo que hace la función ForceClass es agregar como Style, los estilos de una clase. Como todo el mundo sabe, la propiedad Style tiene más peso que el class mas específico que pueda haber.

Ahora en el mismo ejemplo, podríamos hacer lo siguiente:

input#nombre{
  color: red;
}
<input type="text" id="nombre" />

$('nombre').ForceClass('blue');

Es tan sólo una idea, que quizás como todo remedio tiene ‘efectos secundarios’

¿Que les parece?

Preguntas y respuestas:

• Ayuda! SexyAlertbox no hace el foco a los botones OK, de manera que cuando presiono “Enter” se vuelve a abrir otro alerta!

Respuesta: Descargate esta versión con la solución de Stefan.

• ¿Como puedo ejecutar SexyLightbox desde javascript, sin usar un link?

Alenko nos dejó la solución:

If anybody is wondering like i did how to call it onclick its very simple you just declare SexyBox =new SexyLightBox() and then call SexyBox.show(’Title’,’http://blbla.com/picture.jpg’,’sexylightbox’); on your click function

O para los que lo quieran en español está la misma respuesta en el foro.

• Tengo una página con elementos flash, y cuando se ejecuta SexyLightbox no oculta el flash. ¿Como puedo ocultarlo?

Solución: Debes establecer la propiedad del flash WMODE=Transparent
Por ejemplo:

<object classid="..." codebase="..." width="795" height="200" title="Head">
<param name="movie" value="flash/header2.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent" />
<embed src="flash/header2.swf" quality="high" wmode="transparent" pluginspage="..." type="application/x-shockwave-flash" width="795" height="200"></embed>
</object>

Si usas SWFObject lo puedes hacer de esta manera:

so.addParam('wmode', 'transparent');

• Mootools es un asco. ¿Existe alguna versión de estos scripts para jQuery?

Si. La nueva versión de SexyAlertBox posee una versión para jQuery. En cuanto a SexyLightbox estoy trabajando en ella.

• Bueno OK, usaré Mootools pero ¿hay alguna forma de achicar el tamaño de Mootools?

Si lo que queremos es ahorrar ancho de banda de nuestro servidor, podemos hacer que Google nos “preste” el suyo! Además, lo enviará comprimido:

Mootools 20 KB (63 KB uncompressed)
jQuery 20 KB (54 KB uncompressed)
Dojo 29 KB (89 KB uncompressed)
YUI 9 KB (27 KB uncompressed)

Para cargar cualquier framework desde los servidores de Google debemos escribir esto:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>

Si queremos cargar jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Mas info de eso en Developer’s Guide Google

Saludos!

El efecto “Slide” en mootools viene preparado por defecto para ocultar el contenido de un elemento.
Esto quiere decir, que al empezar la carga de la página, el elemento está visible y el efecto se encarga de ocultarlo.
¿Que pasa cuando queremos exactamente lo contrario?
Por ejemplo, empezar con un div oculto y poner un link para mostrar el contenido.
La solución:

<div id="buscar" style="display:none">
</div>

var fx = new Fx.Slide('buscar', {duration: 500});
if ($('buscar').style.display=='none') {
  fx.hide();
  $('buscar').style.display = 'block';
}
fx.toggle();

Explicación para novatos:
Establecemos la propiedad “display” a none, ocultando el div.

Cuando carga la pagina y asignamos el efecto, lo ocultamos formalmente con “hide()” y ponemos el display a “block” para hacerlo visible (pero mootools ya se ha encargado de ocultarlo via javascript).

Así, una vez “formalmente invisible”, mootools ejecutará “toggle()” y lo mostrará bien.