soy Martín Iglesias diseñador web freelance de A Coruña, especializado en maquetación css adaptativa y desarrollo de páginas web a medida.

Volvemos a jQuery y esta vez lo hacemos con un poco de PHP y JSON. Lo que vamos a hacer es rellenar un SELECT (o lista desplegable) con opciones cargadas remotamente mediante JSON.

Para ello, nos vamos a valer de 3 elementos. Un formulario -con un botón para cargar el contenido-, un poco de javascript para hacer la carga de opciones y un PHP que devolverá un array convertido en una cadena JSON.

Tú me dirás, pero a quién se le ocurre cargar las opciones de un select presionando un botón y yo te diré... a nadie, pero la idea es hacer lo que se podría traer automáticamente mediante la interacción de tu click, más que nada, para que veas lo que está pasando.

ver más >

Siguiendo con mis anteriores post donde hablo de jQuery Validate, esta vez me ha tocado verificar que la fecha ingresada en un campo de texto de mi formulario sea correcta.

Qué quiere decir que una fecha sea correcta... pues que exista. jQuery Validate tiene una opción para validar fechas y otra que llama dateISO, pero según mis pruebas, el primer caso (DATE), sólo verifica que ingreses un número (he probado a poner un 33 y el validador ha pasado de largo)... y el segundo, si bien valida el formato de una fecha (dd-mm-yyyy o yyyy-mm-dd) no verifica que la fecha exista, por lo que si pones 33-33-3333 te deja pasar porque el formato es correcto.

Sin más introducciones, nos metemos de lleno a crear un nuevo método de validación. No hay mucho que explicar, en la documentación de jQuery Validate te explica que este potente plugin permite la creación de métodos propios para validar prácticamente todo, así que a eso vamos.

ver más >

Como desarrolladores web, a menudo necesitamos mostrar las fechas en nuestro sitio web. Como usuario, no me gusta leer fechas completos como "26 de noviembre 2011 23:30" porque, inconscientemente, me pongo a hacer la cuenta para saber cuánto tiempo pasó hasta el día de hoy.

Prefiero leer fechas inteligentes como "Hace 1 hora" o "hace 6 meses". Por lo tanto, aquí he escrito una función rápida y sencilla en PHP que muestre la diferencia o tiempo transcurrido basándose en un valor de marca de hora determinado tiempo.

Básicamente definí 2 funciones anteriores:

ver más >

A raíz de una consulta en Twitter de mi buen amigo @tecnorama y de mi nuevo amigo @opeto82, he preparado una minidemo para dejar fijo el cabecero (o el elemento que nos interese) al hacer scroll y no perderlo de vista.

Seguramente habrás visto miles de webs (incluso la mía) que al desplazarte con las barras de desplazamiento vertical, pierdes el logo, el menú o algún elemento que te haría falta tener a mano si el contenido se hace muy extenso.

Pues bien, este pequeño código de 2 líneas aplicará una clase CSS a nuestro elemento si el scroll supera determinados pixels y se la quitará si el scroll vuelve a su estado original.

ver más >

Lo que vamos a hacer en este post es agregar dinámicamente un botón para volver a la parte superior de la web si nuestra página tiene scroll vertical.

Básicamente controlaremos la posición vertical de nuestra página y si ésta supera un tamaño especificado en el código javascript, aparecerá un botón con una flecha apuntando hacia arriba en la parte inferior derecha de nuestra pantalla.

Lo curioso de ésto es que, por una vez, lo haremos sin utilizar ninguna clase de plugin y lo haremos de tal manera que no haga falta escribir el botón en todos los html de nuestra web -aunque en lenguajes dinámicos agregarlo en alguno de los includes que utilices evitaría una línea de javascript-.

ver más >

Si eres de los que usan las tablas para lo que realmente son, es decir, para mostrar datos tabulares y no para maquetación, este plugin te vendrá bien si tus tablas contienen muchas filas y corres el riesgo de perder los cabeceros de las columnas al hacer scroll.

Si usas Excel, sabrás que puedes fijar el contenido de las cabeceras para mantenerlas siempre visibles en la parte superior y así saber siempre qué columna estás viendo. Pues bien, este plugin hace lo mismo pero en una tabla de HTML.

Quien me conoce sabe que odio las tablas y la maquetación con ellas, pero hay que reconocer que cuando el contenido debe ir en forma de tabla, es absolutamente correcto utilizarlas y no simular su apariencia a base de divs o listas desordenadas.

ver más >

FractionSlider es un slider más en jQuery, como tantos otros que hay por ahí conocidos tales como el NivoSlider (uno de mis preferidos), el Galleria, etc... pero tiene una particularidad que lo hace diferente y es que cada slide puede tener sus propias animaciones, transiciones y efectos.

Es así, cada uno de los slides puede contener diferentes partes y configurar el orden de aparición, efecto y animación junto al tiempo de duración.

Aunque alertan de algún bug en IE, su autor dice que no ha podido reproducirlos y promete, en la nueva versión publicada, que es slider ya es responsive.

ver más >

Una ventana modal es una ventana secundaria que requiere que los usuarios interactúen con ella antes de que puedan seguir utilizando la aplicación principal. Las ventanas modales son uno de los elementos de la interfaz de usuario más comúnmente usados, y se utilizan, entre otras cosas, para comunicar información importante, o para alertar de error o advertencia.

Zebra_Dialog es un plugin de jQuery pequeño y compacto (un archivo Javascript, sin dependencias distintas de jQuery 1.4.1+) y altamente configurable para la creación de cuadros de diálogo modales, su intención es la de reemplazar el ALERT y CONFIRM nativos de Javascript además de brindar muchas más opciones como abrir páginas en modo iframe, carga de contenido vía ajax, etc...

También se puede utilizar como un widget de notificación (cuando se configura para mostrar sin botones y cerrar de forma automática) para las actualizaciones o errores, sin distraer a los usuarios de su experiencia de navegación por mostrar alertas molestas.

ver más >

Si habías visto mi antiguo post del plugin jQuery para contar y limitar caracteres dentro de un textarea (que un amigo twittero me avisó que la página original ya no funciona), he buscado una alternativa a ese antiguo post y he dado con el jQuery Textarea Characters Counter Plugin.

Este plugin, muy configurable y con poquitas opciones, y lo que es mejor, un peso de 5kb en versión producción, te permite personalizar la cantidad de caracteres permitidos, contar las palabras y alertar al usuario cuando está llegando al límite indicado.

No tiene mucho más. Te dejo una minidemo con las opciones básicas y el enlace a la web original para descargar el código.

ver más >

Un plugin interesa para mostrar una imagen destacada que, al pasar el ratón por encima, mueva esa imagen de tal manera que se vea el trozo oculto.

Además de eso, mostrará un pequeño caption que podemos indicar utilizando el title de nuestra imagen.

Vamos a intentar explicarnos, si tenemos una lista de productos con una pequeña foto miniatura, a menudo nos pasa que debemos cortar la foto porque algunas están tomadas en modo paisaje (apaisada) y otras en vertical y, buscar la forma de encajar ambos tipos de imágenes hace que uno de los métodos siempre pierda.

ver más >