Desen Web

Menú horizontal con un sencillo efecto. En el primer el hover es la linea que vemos debajo que se desliza desde la izquierda hasta el botón que tengamos el ratón.
En el segundo, seria el mismo efecto, pero en vez de la linea se desplaza todo el fondo, añadiendo un efecto de color.

Demo

La librería jQuery, conocida por muchos y una de las mas utilizadas a lanzado su nueva versión. Y lo hará celebrando los 14 días de jQuery.

Las principales mejoras son referente a las funciones de attr() y sobretodo en AJAX incluido el apoyo para analizar JSON nativo, ETags, el contexto de la solicitud, y más… nuevos eventos: focusIn y focusOut.

Felicidades al equipo de jQuery y espero ver mas detalles en las próximas 2 semanas!

14 dias de jQuery 1.4

Primer día

Para realizar el efecto de zoom en una imagen tan solo tenemos que utilizar una sencilla función, pero a veces una función nos puede ir mucho mas rápido que un pluguin o cualquier clase de código complicado.

La función la podéis encontrar en link

Yo he realizado unos pequeños cambios para que pueda ser compatible con todos los IE y para poder modificar la zona donde debe salir nuestro zoom:

Para ser compatible con IE, modificar:  css(’backgroundColor’,'rgba(0,0,0)’) por css(’backgroundColor’,'rgb(0,0,0)’) ya que la propiedad alpha no es compatible con IE (la solución seria utilizar otra propiedad propia de IE)

Para poder modificar la colocación del zoom modificamos:

var loupe = {’width’ : 200, ‘height’: 150};

Por:

var loupe = {’width’ : 200, ‘height’: 151, ‘left’: -200, ‘top’: 10};

Y la:

$(’#thejLoupe’).css(’left’,e.pageX+10).css(’top’,e.pageY+10);

Por:

$(’#thejLoupe’).css(’left’,e.pageX+loupe.left).css(’top’,e.pageY+loupe.top);
De esta forma podemos situar nuestro zoom donde querramos. Incluso en vez de utilizar-lo como zoom podemos hacer salir el contenido HTML que querramos.

Ejemplo:

Nuevo pluguin jquery para hacer precarga de paginas. Substituye el típico gif “Cargando…” por el efecto que produce este pluguin. Realiza un sencillo efecto de precarga que nos puede ser muy útil para evitar una carga lenta o descuadrada de nuestra web.

Caracteristicas

• Precarga de una página web entera.
• Precarga de una parte de la página
• Obtiene todas las imágenes y bacgrounds de tu css
• Fácil de implementar
• Barra de carga ajustable
• Compatible con los últimos navegadores (incluso IE7 y IE6)

Pluguin completo y código fuente en Gaya blog

Demostración

Cuando tienes la necesidad de un script como la construcción de un carrito de la compra, a veces puedes tardar mas de lo necesario en desarrollarlo, aun y saber que debe existir un script por algún sitio que haces justo lo que quieres, puede ser difícil encontrarlo. Pero últimamente termino encontrando solución en algún pluguin para jQuery.

Con este pluguin de jQuery tendremos un carro de la compra en un momento. Funcionando directamente con PHP, la gestión de la base de datos y todo lo demás no nos lo podremos ahorrar.

Link: jCart