Data Fiscal en BeBop web

Hace unos días, los amigos de la AFIP nos contactaron por mail para comunicarnos que debíamos incluír en nuestra web el logotipo de “Data Fiscal” que permite al público conocer el estado de nuestras obligaciones con el fisco.

El logo es bastante feo y el tamaño que genera la aplicación de la web de AFIP es ENORME! Asi que estuvimos pensando cómo incluírlo en nuestra web: se nos ocurrió armar un widget que lo contenga y permita guardarlo y desplegarlo a voluntad. Ya que estábamos, armamos otro para los botones de Facebook y Google Plus, nos parece la solución mas prolija.

Un poquito de magia JQuery y unos minutos después ya estaba listo. Qué hicimos:

_ Dos DIVs (uno para cada widget) con position: absolute.

_ En el $(document).ready() de JQuery incluímos unas líneas que manipulan la posicion de estos DIVs, usando $(id).css(‘top’) y $(id).css(‘left’). De este modo logramos que aparezca solamente el link de la parte inferior del widget.

_ En ese link de la parte inferior del widget, onclick, llamamos a la funcion switchWidget(). Este función evalúa el valor de ‘top’ para el widget que la está llamando y según eso lo anima con $(id).animate hasta que alcance la otra posición (si está abierto, lo cierra – si está cerrado, lo abre).  Ambos valores de ‘top’ son atributos del DIV del widget.

Nada complejo y nos evitamos llenar de botones y logos el home de nuestro sitio. Si quieren ver cómo quedó http://www.bebopweb.com.ar.

El mail de AFIP no incluye ninguna dirección o vínculo a la cual se pueda informar de que cumplimos con el requisito, así que se lo contamos acá, por si nos están leyendo: ya está, ya lo pusimos!

Anuncios

Acerca de Martin Graglia

Arquitecto y diseñador web en Posadas, Misiones, Argentina
Esta entrada fue publicada en Diseño Web, JQuery, Visuales y etiquetada , , , , , , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s