Outbook

UI-Dev & more

CSS: Rollover de elemento de imagen

Publicado

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 […]

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

Publicado

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 […]

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

Publicado

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

Google Maps: Error al mostrar ubicación

Publicado

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, […]

Javascript: Obtener texto de un elemento

Publicado

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

HTML 5 y Jquery: Componente de buscador con placeholder

Publicado

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.

Jquery: Plantilla base para construir un plugin

Publicado

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