Javascript: Carrusel / Slideshow con Jquery

Hace un par de años publiqué un slideshow con Jquery, que tuvo buena acogida y resultó bastante útil. Hace poco lo he estado rehaciendo, en forma de plugin Jquery. Además el código es más legible y se añade la posibilidad de tener controles para ver los elementos ‘Anterior’ y ‘Siguiente’.

Características:

  • Plugin de Jquery
  • Accesible: los controles no tienen dependencia de dispositivo, permiten pausar e ir a slides concretos.
  • Si no hay Javascript se le puede dar estilo para que no se vea mal el contenido.
  • Posibilidad de mostrar dos o más bloques en un solo slide.

Seguir leyendo «Javascript: Carrusel / Slideshow con Jquery»

Calendario accesible con Javascript (Jquery)

Llevaba tiempo queriendo montarme un calendario con Javascript, y dejar de depender de calendarios de terceros (que no siempre se ajustaban a lo que necesitaba), y por fin lo he hecho. Así que, lo publico por si a alguien le resulta útil.

El calendario tiene las siguientes características:

  • Posibilidad de insertarlo en línea (el comportamiento al clicar una fecha no va definido, habrá que crearlo según sea necesario)
  • Detección de soporte de calendario para los campos de fecha en HTML5
  • Accesible si obviamos el requerimiento de soporte Javascript: no es dependiente de dispositivo.
  • Posibilidad de limitación de fechas seleccionables.
  • Facilidad de traducción a otros idiomas.
  • Inicio de semana (domingo o lunes) configurable.

Seguir leyendo «Calendario accesible con Javascript (Jquery)»

Listas ordenadas: cambiar estilos de la numeración

A los elementos de lista se les pueden añadir por CSS bullets, números, letras, etc. que les precedan cuando son visualizados en el navegador, mediante la propiedad ‘list-style’, o bien asignarles una imagen de fondo mediante la propiedad ‘background’.

Cuando se trata de listas ordenadas lo habitual es utilizar números:

ol li {list-style:decimal;}

Los números de la lista ordenada llevarán el mismo estilo que el elemento LI. Pero puede ocurrir que se quiera que los números tengan un estilo distinto, por ejemplo que, a diferencia del texto, vayan en negrita:

Lista ordenada con números en negrita

Seguir leyendo «Listas ordenadas: cambiar estilos de la numeración»

CSS: Rollover de elemento de imagen

Es muy común la necesidad de que una imagen dentro de un enlace esté como elemento de imagen (IMG) y que al mismo tiempo deba tener un rollover:

<p>
  <a href="#"><img src="imagen_estado_normal" alt="Imagen de ejemplo" /></a>
</p>

La solución habitual pasa por utilizar Javascript para hacer el cambio de imagen en el estado ‘sobre’.

Pero quizá sea más sencillo hacerlo mediante CSS. Para ello había que asignar una imagen de fondo al elemento de enlace, y que posición y dimensiones de dicha imagen de fondo coincida exactamente con las del elemento IMG. Una vez asignado el fondo, en el estado ‘sobre’ del enlace habrá que hacer que el elemento de imagen quede invisible mediante la propiedad visibility:

a {background:url(imagen_estado_sobre) no-repeat 0 0;}
a:hover img {visibility:hidden;}

Javascript: Galería de imágenes con detalle ampliable (Jquery)

En esta ocasión he preparado una galería en la que cada imagen aparece con sus proporciones originales (nada de galerías con todas las imágenes del mismo tamaño), lo único similar es la altura de las imágenes, para poderlas meter en líneas.

Además, al pasar el puntero por encima se despliega en modo de detalle, con la imagen completa y el texto que se desee. En principio sería accesible, ya que el enlace de la imagen lleva al destino, aunque sin dispositivo apuntador no sería posible ver el modo de detalle (esto lo he dejado pendiente, al igual que la versión Prototype).

Seguir leyendo «Javascript: Galería de imágenes con detalle ampliable (Jquery)»

Javascript / Jquery: Ordenación alfabética de elementos

He preparado un plugin de Jquery (un poco rudimentario) para ordenar elementos de lista de forma alfabética.

Para hacer el script me he basado en una función expuesta en StackOverflow – How may I sort a list alphabetically using jQuery? (enlace externo, en inglés).

Seguir leyendo «Javascript / Jquery: Ordenación alfabética de elementos»

Google Maps: Error al mostrar ubicación

El problema: Le damos un texto a Google Maps en el HTML con la ubicación a mostrar, la ubicación es correcta y no se muestra ningún mapa, o incluso salta algún mensaje de error. Por ejemplo:

<p id="ubicacion">Vía de Dublín 7,<br />
Madrid 28042</p>

Mediante Javascript se cogería sólo el texto:

Vía de Dublín 7,
Madrid 28042

Si nos fijamos el código fuente de ejemplo se divide en dos líneas. Ese es el motivo del error. Si el código estuviese en una sola línea, no habría problema. Pero utilizando Javascript (en el ejemplo se usa Jquery) se puede dejar el texto en una sola línea.

Se recupera solamente el texto (se quitan el BR y el P):

var texto = $('ubicacion').text();

Pero no se ha quitado el salto de línea. Se quitará utilizando el método ‘replace’:

var texto EnUnaLinea = texto.replace(/(rn|n|r)/gm,"");

La variable ‘textoEnUnaLinea’ devolverá:

Vía de Dublín 7, Madrid 28042

Y se evitará el error con Google Maps.

Jquery/Prototype: Posicionamiento de pie de página cuando la altura del área visible es mayor que la del documento

Actualizado: Añadida versión para Prototype.

En ocasiones tenemos el típico diseño en el que el fondo de cabecera y de pie de página ocupan todo el ancho visible, sea cual sea. Es tan simple como poner un fondo en el elemento BODY y otro fondo en el elemento HTML.

Seguir leyendo «Jquery/Prototype: Posicionamiento de pie de página cuando la altura del área visible es mayor que la del documento»