Categoría: Javascript (Página 2 de 2)

El otro dí­a descubrí­ de mano de phatfusion, otra aplicación de pop-up en javascript llamada multibox. Basada en mootools 1.11 que nos permite abrir en una capa nueva, al estilo pop-up (como la también conocida lightbox, de la misma gente), pero con un diseño más elegante y sin poner un telón gris por detrás.

Pueden cargarse multitud de archivos, incluso otras webs. En la web hay varios ejemplos. Otra variante de estas conocidas «pop-ups» a tener en cuenta.

Via anieto2k descubro xRay, esta excelente utilidad que nos permite ver las propiedades de los elementos que componen una web sin usar Firebug o webdeveloper o tantas aplicaciones que existen actualmente para ello.

La verdad es que reconozco que prefiero usar Firebug por la potencia que tiene, pero también hay que decir que no siempre se tiene esta opción bien porque no tenemos Firefox, porque no tenemos permisos, etc, etc.

¿Y en qué se basa? Pues para hacer funcionar el invento, tan sólo tenemos que ir a la página web que queremos investigar y poner un código (javascript) en la barra de direcciones. Tras esto, únicamente tenemos que hacer click sobre los elementos de la web que nos interesen y obtendremos su información. Este código carga un javascript remoto que es el encargado de realizar todo el trabajo.

El diseño es elegante a la par de cuidado y la verdad es que el resultado es muy muy bueno.

En resumidas cuentas, los pasos que tenemos que realizar son:

1. Ir a la página web que nos interesa
2. Una vez en ella, borrar la URL de la barra de direcciones y poner esta otra
3. Ahora, una vez aparezca la ventana indicando que se ha cargado el script, sólo nos queda hacer click en los elementos para obtener su información

La ventaja que tiene este método es que podemos guardar la dirección como bookmark del navegador y así­ la tendremos muy a mano.

Este es un ejemplo de cómo se muestran las propiedades

Según los autores, es compatible con:

• Todos los navegadores basado en Mozilla (Firefox, Camino, etc) en Linux, Windows y Mac OS X
• Safari 2 y 3 en Mac OS X. En el Safari 3 para Windows la forma de usarlo es un poco distinta (ver enlace)
• Internet Explorer 6+

De momento no funciona con Opera, pero están en ello.

Para los más atrevidos, parece que hay una versión beta que puede accederse usando este otro código. Lo he estado probando y no he notado diferencias a parte de un efecto de degradado cuando carga la página… supongo que les he pillado todaví­a con poco desarrollo de la versión beta 🙂

Via anieto2k descubro esta curiosa aplicación: CSS Text Wrapper. Es una ingeniosa aplicación que nos permite dar la forma que queramos a nuestros párrafos (ver ejemplos).

La verdad es que el método es bastante sencillo ya que se trata de que tengamos un contenedor con nuestro texto (un simple div) y la aplicación coloca mediante Javascript diversos divs a un lado y al otro del nuestro de modo que el texto en su interior se adapte a esa forma. Así­, podremos adaptar el texto a la forma que más nos interese para colocar imágenes, otros textos, etc.

Hay un ví­deo-tutorial que nos muestra cómo funciona este método y cómo podemos utilizar la herramienta que hay en la web de la aplicación para adaptar nuestro texto a dos formas redondas.

Creo que lo único que harí­a falta es buscar accesibilidad. Al menos cuando he desactivado Javascript de la página de ejemplos no se mostraba el texto. Creo que (por ejemplo viendo el ejemplo del propio ví­deo) serí­a interesante que el texto apareciese en bloque cuando no hubiese javascript y que en caso de que hubiese javascript, apareciesen las imágenes (o flotasen de otra forma) y se viese con la forma final. Uhm… trastearemos un poco, jeje

Hace unos dí­as estuve trabajando sobre unos formularios ví­a Ajax y se me ocurrió la opción de marcar los campos que no estaban correctos con un borde rojo en vez de gris. Pero ya que contaba con mootools, decidí­ crear la opción de que los campos parpadeasen durante un par de veces. Tras darle unas cuantas vueltas, he desarrollado esta pequeña clase que realizar este parpadeo sobre cualquier propiedad CSS.

Y lo mejor para estos casos, ver un ejemplo.

La clase está disponible en esta dirección.

Es simplemente una clase que acepta como parámetros el id del elemento y un hash con las siguientes opciones:

• property: propiedad CSS a variar, por defecto border-color
• duration: duración en milisegundos de una transición, por defecto 500
• margin: margen en milisegundos entre una transición y otra, por defecto 50
• from: valor inicial de la propiedad CSS. Admite valores enteros o incluso colores usando Color(). Por defecto Color(‘#000’)
• to: valor final de la propiedad CSS. Admite valores enteros o incluso colores usando Color(). Por defecto Color(‘#fff’)
• times: número de repeticiones, considerando una repetición como una transición de ‘from’ a ‘to’ y de ‘to’ a ‘from’. Por defecto 3
• transition: transición de mootools a usar, por defecto Fx.Transitions.linear
• endActive: si está a true, indica que se acabará con el valor ‘to’, mientras que si es false, acabará con el valor de ‘from’. Por defecto, true