Outbook

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

Inicio que contiene a Desarrollo web

Datos de búsqueda

Categoría: ‘Desarrollo web’

Listas ordenadas: cambiar estilos de la numeración

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:

Lista ordenada con números en negrita

Leer el resto del artículo

Datos del artículo:

CSS: Rollover de elemento de imagen

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;}

Datos 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:

MySQL: reemplazar cadenas de texto de modo masivo

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)

Datos del artículo:

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

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.

Leer el resto del artículo

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

Jquery: Plantilla base para construir un plugin

Fecha de publicación: 2011/02/17

He aquí el código:

(function($){
  $.fn.XXXX = function(options){
    var defaults = { // Opciones por defecto
      opcion1: ''
      ,opcion2: ''
    }
    var op = $.extend(defaults, options);

    return this.each(function(){
      $(this).XXXX();
    });
  }
})(jQuery);

Datos del artículo:

Información del sitio