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:
Fecha de publicación: 2011/10/04
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:

Fecha de publicación: 2011/09/01
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;}
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).
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).
Fecha de publicación: 2011/06/28
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.
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).
Fecha de publicación: 2011/06/06
Basta una consulta muy sencilla:
UPDATE tabla_de_la_bbdd SET campo_de_la_tabla = replace(campo_de_la_tabla,"texto-antiguo","texto-nuevo")
Saber más: REPLACE Syntax (enlace externo, en inglés)
Fecha de publicación: 2011/05/18
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.
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.