LightWindow es un sistema de ventanas modales desarrollado en Javascript. Nos permite mostrar "popups" dentro de la página al mejor estilo Lightbox, pero soporta todo tipo de contenido! Lo grandioso es que nos permite generar estos in page popus sólo agregando una clase CSS a un link o imagen, y si el link apunta a un video o archivo SWF lo reproduce directamente dentro del popup. Además soporta agregado de información mediante tags adicionales como title, author y caption y se pueden pasar parámetros para setear el tamaño y posicionamiento del popup. Simplemente genial! Un ejemplo de cómo embeber una movie pasando params (una pavada!): <a href="http://images.apple.com/movies/newline/the_number_23/the_number_23-tlr1_h.640.mov" class="lightwindow" params="lightwindow_width=640,lightwindow_height=290">Link Name</a> Hace poco usé Modalbox, otro sistema parecido, pero LightWindow, con todas sus prestaciones y facilidad para mostrar todo tipo de contenido dentro de los popups con mínimo esfuerzo y posibilidades de configuración por parámetros me parece más interesante. Enjoy!

Otra cosa que funciona bien en Firefox y no funciona en IE7: Al enviar requests utilizando el método httpRequest desde Javascript, IE7 cachea las respuestas del servidor, entregando datos no actualizados luego de la primer respuesta cacheada. Este es un problema grave, pero tiene una solución muy simple:

Al enviar nuevos datos en el request forzamos a IE para que vuelva a consultar al servidor y así obtener una respuesta actualizada.

La implementación podría ser algo así: url='script.php?data='+data+"&dummy=" + new Date().getTime(); makeHttpRequest(url, 'get', '', 'readResponse'); Como se puede apreciar en el code anterior, pasamos una var adicional en la url, "dummy", la cual contiene la hora, valor que se actualiza permanentemente. Otro punto menos para IE7.

En una app web creo una div en forma dinámica via javascript. En una parte del code creo un objeto que apunta a esta div para poder modificar el innerHTML y otras propiedades. El id de la div es "popin", por lo que me resultó adecuado utilizar en javascript una var con el mismo nombre para asignar el objeto, algo así: popin=document.getElementById["popin"]; Esto en Firefox funciona perfectamente, pero en IE (probado en IE7)... Anda como el reverendo ojete! (entiéndase mi bronca al respecto) Luego de dar varias vueltas con el tema consideré esta posibilidad y la solución fue utilizar otro nombre de variable para el objeto: popinObj=document.getElementById["popin"]; Ahí sí, funcional tanto en Firefox como en IE7. Y ahora me permito un breve desahogo: Internet Explorer... sos una basura! (es apto todo público vió :p)

Internet Explorer sigue dando dolores de cabeza, ahora con la activación de controles ActiveX, como ser media players y animaciones flash. A partir de un update distribuido por Microsoft que muy probablemente tengas si usás el servicio update, Internet Explorer comenzó a bloquear la ejecución directa de estos componentes, pidiendo al usuario un click para activarlos. Al menos se dieron cuenta que esto reduce la usabilidad del browser (y rompe terriblemente las pelotas) y en una publicación de MSDN nos proporcionan a los web developers una forma de pasar por alto la protección utilizando un poco de magia y javascript. Yo diría que es un motivo más para usar Firefox.

Otro componente HTML cuyo styling puede ser complicado es el SELECT, o lista desplegable.
Pero en el artículo que acabo de hallar tenemos una forma de imitar la funcionalidad del select logrando una customización gráfica con todas las posibilidades de aplicación de CSS.

Pueden obtener el código Javascript y CSS completo en los ejemplos que están al final de la nota.

El elusivo styling de los file fields ha encontrado solución en una excelente publicación de QuirksMode, altamente recomendable para resolver este asunto.
Una alternativa en IE es simular el click sobre el file field, lo cual no está visto como una buena práctica, o más bien se ve como un defecto en la seguridad del browser, y en Firefox no es posible hacerlo, digamos que es un browser más seguro.
En IE se puede acceder directamente al evento click de un elemento, disparándolo, por ejemplo:

document.forms[0].myFileField.click();

Aprox. a la mitad de la lectura de un contenido publicado en web, para llegar al cual tuvimos que hacer bastante scroll en la página, hacemos click en un link que abre un popup y entonces... la barra de scroll vuelve a tomar la posición inicial, como si un ente invisible lo hubiera desaplazado al inicio de la página para hacernos perder de vista lo que estábamos leyendo y enloquecernos con la iteración de este evento cada vez que clickeamos un popup. A quién no le molesta esto?

Bueno, realmente es muy sencillo evitar que la página vuelva al inicio del contenido al abrir popups.
El problema está en la forma de preparar el link para que se ejecute el popup.
Aún es muy común encontrarnos con el uso del infame numeral:

<a href="#" onClick="abrirPopup()">Abrir popup</a>

 

Solución rápida:

<a href="javascript:void(0);" onClick="abrirPopup()">Abrir popup</a>

 

Y la explicación extensa y aburrida (con recomendación de disco de metal progresivo y todo)...

Read more!

Hoy tuve que responder al requerimiento de aplicar un generador de passwords en Javascript, cuyo source code pude encontrar en la web.
Apliqué algunas pequeñas modificaciones sobre ese code para que se integre con el form existente y quedó muy bien.