JavaScript

El acordeón no acordeona

Posted in diseño web, General, JavaScript on mayo 13th, 2010 by Diego – 4 Comments

Terminé de diseñar un sitio, en el cual una de las secciones, más precisamente la de enlaces, posee un hermoso acordeón que permite dividir los mismos en categorías.  Como desarrollo basándome en Firefox, ya sabía que en ese navegador funcionaba.  Decidí probar el sitio en Chrome, y descubrí que el sitio se veía como corresponde.

Luego, y para finalizar el trabajo, le pedí a un amigo una amiga que probara el sitio en Internet Explorer.  Obviamente, y como te estás imaginando, el sitio explotaba completamente, todo se veía corrido y fuera de lugar y las tipografías horribles.

Comencé el proceso de hack de la hoja de estilos CSS.  Luego de media hora, el sitio se veía bien en todos los navegadores. Hasta que descubrí una falla, que se producía solo en IE y no en los demás.  El acordeón, (realizado en JavaScript mediante Mootools) no funcionaba.

Luego de revisar varias veces el código buscando algún conflicto con otro JS, probar una docena de modificaciones, volver a bajar el framework, etc, etc ,etc  pude dar con la falla que provocaba el error: el Document Type.  Alcanzó con cambiar el mismo por el que pongo a continuación para que todo funcionara a la perfección.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Datagrid plugins para Jquery

Posted in diseño web, JavaScript, Programación on enero 14th, 2010 by Diego – 1 Comment

Mostrar datos de una manera cómoda para el usuario suele ser un dolor de cabeza para los programadores. Una gran solución es utilizar uno de estos plugins para el framework Jquery de JavaScript.

La librería OverLib

Posted in diseño web, JavaScript on mayo 9th, 2009 by Diego – Be the first to comment

ejemplo_overlib

Un excelente recurso web.  Se trata de una librería JS que nos permite mostrar “pops” o
“globitos” al pasar sobre hipervínculos. En su sitio web podemos ver como funciona
con varios ejemplos. Además, se puede customizar los colores e inclusive modificar
el estilo del popup.

Para instalarla, tenemos que seguir estos pasos:

1- Copiamos la librería a nuestra carpeta JS en la raíz del sitio. Si no tenés una, creala.

2- Agrego una línea en el <head> para linkear a la librería (no te olvides de modificar la ruta):

<script type=”text/javascript” src=”js/overlib.js”><!– overLIB (c) Erik Bosrup –></script>
3-Inmediatamente despues de la apertura de la etiqueta <body> insertamos esta línea:
<div id=”overDiv” style=”position:absolute; visibility:hidden; z-index:1000;”></div>
con esto definimos una DIV que ocupará todo el sitio y estará por
encima de cualquier otro elemento.

4-Finalmente, modificamos los links en los que queremos que aparezca el globo para
que queden de esta manera:
<a href=”javascript:void(0);” onmouseover=”return overlib(‘Esto es gracias a OverLib.’);”
onmouseout=”return nd();”>LINK</a>