Outbook

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

Datos de búsqueda

Categoría: ‘Javascript’

Javascript: simular hover en Internet Explorer 6 con Prototype

Fecha de publicación: 2010/07/16

Se trata de un sencillo script que nos permitirá evitar el problema de Internet Explorer 6 con la pseudo-clase :hover. Dicha pseudo-clase se puede aplicar a cualquier elemento, para que al pasar el puntero por encima puedan cambiarse los estilos, pero Internet Explorer 6, en su línea habitual, solo lo acepta en elementos de enlace.

Leer el resto del artículo

Datos del artículo:

Javascript: Selección múltiple de campos checkbox con jQuery

Fecha de publicación: 2010/07/14

He preparado la típica funcionalidad en la que al seleccionar un campo INPUT de tipo checkbox se seleccionan otros campos asociados a él.

Leer el resto del artículo

Datos del artículo:

Simulación de elemento SELECT con jQuery

Fecha de publicación: 2010/07/11

He preparado un componente que simula un elemento SELECT, en el que se puede seleccionar una sola opción, que evita algunas de las limitaciones de los elementos SELECT de verdad, pudiendo dar formato a las opciones que contiene, añadir imágenes, etc.

Leer el resto del artículo

Javascript: Manipular DOM desde una página cargada dentro de un IFRAME

Fecha de publicación: 2010/05/02

En alguna extraña ocasión nos podemos encontrar con la siguiente situación: necesitamos modificar el HTML de una página (en adelante Página 1) desde una página que se carga en un IFRAME (en adelante Página 2) de la Página 1.

Para lograr el éxito se utilizará window.parent.

Leer el resto del artículo

Datos del artículo:

Javascript: abrir ventana popup de modo accesible

Fecha de publicación: 2010/03/22

En algunas ocasiones, a pesar de la proliferación de las denominadas como ventanas modales, todavía nos podemos encontrar con la necesidad de generar ventanas popup.

Y para ello he creado un Javascript, basado en Prototype pero sencillo de portar a otro framework o a Javascript puro.

Leer el resto del artículo

Datos del artículo:

Javascript: Precarga de imágenes

Fecha de publicación: 2010/03/07

Hay que advertir que esta técnica no es la adecuada para los rollover en CSS, para los que es más correcto el uso de CSS Sprites. Se ajusta más para aquellas ocasiones en las que hay que hacer un rollover en elemento de imagen (IMG), para que el estado hover no aparezca momentáneamente sin imagen, o imágenes dentro de fragmentos de HTML generados mediante Javascript, para que se muestren inmediatamente.

Leer el resto del artículo

Datos del artículo:

PHP y Javascript: Subir múltiples archivos

Fecha de publicación: 2010/02/28

Esta semana estuve montando un PHP que sirviese para subir y eliminar archivos en un servidor, y que además lo pudiese hacer sin necesidad de recargar la página.

Para subir los archivos y no recargar la página ha sido necesario utilizar un elemento iframe como destino del formulario de envío (no encontré otro modo). Si no se dispone de Javascript funciona de igual modo, pero recargando la página y sin el iframe.

En principio es accesible, quizá le falta WAI ARIA y revisar que el foco no pase al iframe (En Firefox y en Internet Explorer 6 no parece que eso de problemas).

Este es un script del que no puedo poner ejemplo, ya que sería arriesgado por temas de spam, pero basta con descomprimir el descargable en una carpeta del servidor para poder probarlo. Descargar ejemplo (ZIP, 113KB)

Datos del artículo:

Desactivar Javascript en Internet Explorer 6

Fecha de publicación: 2010/01/14

Desactivar Javascript en IE 6 es sencillo, tan solo hay que seguir los siguientes pasos:

Leer el resto del artículo

Datos del artículo:

HTML 5: Atributo placeholder

Fecha de publicación: 2010/01/09

Actualizado 2011-03-30: nuevos navegadores con soporte.

Resulta muy habitual encontrarse con campos de texto que contienen un valor por defecto que ayuda al usuario a comprender que información debe introducir en dicho campo. El comportamiento habitual es que cuando el usuario activa el campo el texto desaparezca.

Este es el estado antes de activar el campo y una vez se desactiva sin haber introducido datos:

Atributo placeholder (campo inactivo)

Y este es el estado del campo activado antes de haber introducido información:

Atributo placeholder (campo activo)

Para obtener ese efecto es necesario el uso de Javascript, pero con HTML 5 eso se va a terminar.

Leer el resto del artículo

Datos del artículo:

Javascript: establecer atributo readonly en campos de formulario

Fecha de publicación: 2009/12/29

El atributo readonly se establece en Javascript mediante true o false:

var campo = document.getElementById('campo_formulario');
campo.readOnly = true; // Se añade el atributo
campo.readOnly = false; // Se quita el atributo

Un detalle en el que hay que fijarse, ya que de ello dependerá que el script funcione, es la "O" mayúscula al especificar el atributo.

Datos del artículo:

Información del sitio