Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a javascript

Datos de búsqueda

Etiqueta ‘javascript’

Automatización de tareas con Gulp.js

Fecha de publicación: 2016/02/18

Excelente artículo acerca de la automatización de tareas con Gulp.js, un sencillo modo de aprender Gulp y mejorar la productividad en el día a día del desarrollo front-end.

Automatización de tareas con Gulp.js

Datos del artículo:

SliceAnchor: Crear un ancla sin necesidad de enlace con Jquery

Fecha de publicación: 2013/04/10

En las ocasiones en las que se está utilizando el hash en la url del navegador utilizar un enlace como ancla puede ser algo un poco conflictivo (ya que al utilizarlo cambiaría el hash). Es algo muy típico de aplicaciones que en lugar de recargar la página van pidiendo datos al servidor y recargando las partes que sean necesarias (single page interface).

Leer el resto del artículo

Datos del artículo:

Javascript y expresiones regulares: eliminación de espacios y tabulaciones en una cadena

Fecha de publicación: 2012/11/08

A veces las cadenas de texto vienen con una ristra de espacios y tabulaciones indeseados en cualquier lugar de la cadena, algo que a veces no viene demasiado bien (por ejemplo si se necesita medir el número de caracteres para truncar el texto).

Con sencilla expresión regular se puede solucionar el problema:

/([\ \t]+(?=[\ \t])|^\s+|\s+$)/g

Y un ejemplo en Javascript:

text = '   Cadena con   espacios en el inicio, en el medio y en el final          '
text = text.replace(/([\ \t]+(?=[\ \t])|^\s+|\s+$)/g, '');

La variable text devuelve:

'Cadena con espacios al final'

Con la expresión regular del ejemplo y el reemplazo realizado se consigue:

  • Eliminar dentro de la cadena los bloques de más de un espacio o tabulador, quedando sustituidos por un solo espacio.
  • Eliminar todos los espacios, tabuladores y saltos de línea al inicio y al final de la cadena
  • Al no utilizar \s en lugar de se conservan otros elementos como saltos de línea.

Datos del artículo:

Javascript: Carrusel / Slideshow con Jquery

Fecha de publicación: 2012/02/24

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.

Leer el resto del artículo

Datos del artículo:

Calendario accesible con Javascript (Jquery)

Fecha de publicación: 2011/12/18

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.

Leer el resto del artículo

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

Fecha de publicación: 2011/08/17

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).

Leer el resto del artículo

Datos del artículo:

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

Fecha de publicación: 2011/07/23

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).

Leer el resto del artículo

Datos del artículo:

Javascript: Obtener texto de un elemento

Fecha de publicación: 2011/06/07

Con esta sencilla función se puede extraer el texto de un elemento limpiándolo de etiquetas HTML:

function stripHtmlTags (elemento) {
  return elemento.textContent||elemento.innerText;
}

Visto en Stackoverflow – Strip HTML from Text JavaScript (enlace externo, en inglés).

Datos del artículo:

Javascript: equivalencia de método ‘appendTo’ de Jquery en Prototype

Fecha de publicación: 2011/05/09

En Prototype no hay equivalencia al método appendTo() de Jquery (enlace externo, en inglés), pero se puede suplir creando un método para Prototype.

Leer el resto del artículo

Datos del artículo:

HTML 5 y Jquery: Componente de buscador con placeholder

Fecha de publicación: 2011/03/30

Fragmento de HTML 5 con un formulario de búsqueda, en el que se generará el rollover del botón de búsqueda mediante Javascript, y se simulará el placeholder también mediante Javascript en navegadores no soportado.

Leer el resto del artículo

Información del sitio