Misma altura en bloques mediante jQuery

ByLuis

Buen truco para darle la misma altura a diferentes bloques cuando mediante CSS no es fácil de hacer.

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

Equal Height Columns with jQuery

Vía / CSS Globe

Similar Posts

Formatear el código como en Sentido Web

ByLuis

Para aquellos que les guste como formateamos los comentarios en Sentido Web, vamos a explicar el código creado por Choan:

El proceso que sigue es el siguiente:

  • Obtener todos los elementos pre.
  • Para cada pre leer el primer elemento code que tenga.
  • Obtenemos el texto que contiene.
  • Dividimos el texto en líneas.
  • Por cada línea comprobamos si hay algun tipo de comentario, si hay comentario lo separamos en dos partes para luego darle distintos estilos, diferenciando así el formato del comentario.
  • Nos creamos un elemento ol, y en cada li insertamos una línea obtenida anteriormente.
  • Sustituimos el elemento pre por el ol.

Read More “Formatear el código como en Sentido Web”

Uso correcto de los selectores en jQuery

ByLuis

Quien dice en jQuery dice en cualquier otro framework de javascript o lenguaje de programación, el tema es no malgastar recursos. jQuery permite encontrar elementos mediante la clase, por ejemplo:

$('.boton')

Esto es muy cómodo, pero también tiene mal rendimiento, ya que el script debe buscar en todos los elementos HTML y encontrar aquél que tenga class=”boton”. ¿Cómo deberíamos usar los selectores?.:

  • Si el elemento tiene un ID, hay que usar el ID, pero tampoco es plan de añadir ids a todos los elementos.
  • Indica el tipo de elemento, por ejemplo $(‘input.boton’), así limitaremos la búsqueda a los elementos input. Si no solo hay un tipo de elemento, sino varios, los indicaremos todos: $(‘input.boton, a.boton’)
  • Guía a jQuery por la ruta de elementos que puede seguir: $(‘#formulario .boton’)
  • Usa otro elemento para limitar la búsqueda: $(‘#formulario’).find(‘.boton’)

Avoid Bare Class Selectors In jQuery

Códigos Javascripts interesantes

ByLuis

Una colección interesante de código Javascript, sin tener que usar frameworks de Javascript, teniendo en cuenta, que a mi parecer es conveniente antes saber Javascript y luego aprender un framework.

De los scrips que nos muestran, me gustaría destacar:

Ejecutar funciones cuando se carga la página

function addLoadListener(fn){
if(typeof window.addEventListener !='undefined') {
window.addEventListener('load',fn,false);
} else if(typeof document.addEventListener !='undefined') {
document.addEventListener('load',fn,false);
} else if(typeof window.attachEvent !='undefined') {
window.attachEvent('onload',fn);
} else {
var oldfn=window.onload
if(typeof window.onload !='function') {
window.onload=fn;
} else {
window.onload=function(){oldfn();fn();}
}
}
}

Añadir y eliminar eventos

function addEvent(obj,type,fn){
if(obj.addEventListener) {
obj.addEventListener(type,fn,false);
} else if(obj.attachEvent){
obj["e"+type+fn]=fn;
obj[type+fn]=function(){obj["e"+type+fn](window.event);}
obj.attachEvent("on"+type,obj[type+fn]);
}
}
function removeEvent(obj,type,fn) {
if(obj.removeEventListener) {
obj.removeEventListener(type,fn,false);
else if(obj.detachEvent){
obj.detachEvent("on"+type,obj[type+fn]);
obj[type+fn]=null;
obj["e"+type+fn]=null;
}
}

Obtener el elemento que llama a una función

function giT(evt){
var elem;
if (evt.target) {
elem = (evt.target.nodeType == 3) ?
evt.target.parentNode :
evt.target;
} else {
elem = evt.srcElement;
}
return elem;
}

Top Javascript Code Snippets for 2007

Render más rápido de las tablas con CSS

ByLuis

En el caso de que tengamos que usar tablas, cuando realmente se trate de una tabla, es conveniente tener en cuenta una propiedad CSS poco utilizada que nos podrá permitir mejorar la velocidad de render de las tablas.

La propiedad es table-layout y nos permite indicar si queremos que la tabla se dibuje con unos anchos fijos o dependientes del contenido:

.fixed_table {
table-layout: fixed;
}
.auto_table {
table-layout: auto;
}

El valor fixed nos permite dibujar la tabla de una forma más rápida, ya que el ancho de las celdas depende de las columnas y no del contenido de ellas. Por ello, al no tener que mirar toda la tabla para ajustar los anchos, el render se hace más rápido. Es bueno usarlo cuando se trata de tablas muy grandes y mejor si tienen un contenido muy parecido.

El valor auto es dependiente del contenido de las celdas, por lo que es necesario leer toda la tabla. Se recomienda usarlo cuando las tablas tiene contenido muy variable o cuando se trata de pocas filas.

Use the table-layout CSS property to speed up table rendering

Vía / Posh CSS

|

Laboratorio: navegación por teclado

ByLuis

Ya en varios sitios se ha mostrado como realizar la navegación mediante el teclado, esto significa usar las teclas para acceder a contenidos o para realizar acciones.

Nosotros queremos darle un toque de automatización, que tan solo sea necesario añadir un enlace interno en el documento para acceder a la zona del documento.

Crearemos un script que obtenga todos los enlaces internos del documento y si tienen el atributo rel y su valor tiene el formato “formato:[letra]“, se considerará un objetivo para la navegación por teclado. La letra será la que se usará para acceder y pueden repetirse, por lo que si se repiten las teclas para el shortcut, se irán alternando uno a uno los distintos enlaces.

El script consta de dos partes, uno que se ejecuta después de la carga del documento y que recupera todos los enlaces internos y los agrupa por shortcut, y otro que captura el evento onkeydown del document para acceder a la zona del documento (que será modificando el location).

var __SHORTCUTS__ = {
// Guarda los shortcuts con los enlaces
shortcuts: new Array(),
// Índice del enlace actual organizado por shortcuts
idx_shortcuts: new Array(),
// Obtiene todos los enlaces internos y los que corresponden a un shortcut los almacena
leer_shortcuts: function(e) {
var objs = document.getElementsByTagName("A");
for (var i=0; i<objs.length; i++) {
var rel = objs[i].rel;
if (rel && rel.match(/shortcut:[a-z]/i) && objs[i].name) {
var tipo = (rel.substring(rel.indexOf(":")+1)+"").toUpperCase().substring(0, 1);
if (!__SHORTCUTS__.shortcuts[tipo]) {
__SHORTCUTS__.shortcuts[tipo] = new Array();
__SHORTCUTS__.idx_shortcuts[tipo] = 0;
}
__SHORTCUTS__.shortcuts[tipo][__SHORTCUTS__.shortcuts[tipo].length] = objs[i];
}
}
// Capturo el evento de pulsado de teclado en el document
document.onkeydown = __SHORTCUTS__.controlar_keypress;
},
// Captura una tecla pulsada y accede al shortcut que tenga asociado
controlar_keypress: function(e) {
try {
if (!e) e = event;
var key = e.keyCode;
// Obtengo el caracter correspondiente, quizás esto falle, no he hecho pruebas suficientes
var c = String.fromCharCode(key);
// Si es una letra
if (c.match(/^[a-z]$/i)) {
// Obtengo el enlace para el shortcut
var obj = __SHORTCUTS__.shortcuts[c.toUpperCase()][__SHORTCUTS__.idx_shortcuts[c.toUpperCase()]];
// Acceso a esa parte del documento
document.location = "#"+obj.name;
// Incremento el indice para que acceda al siguiente
__SHORTCUTS__.idx_shortcuts[c.toUpperCase()] = (__SHORTCUTS__.idx_shortcuts[c.toUpperCase()]+1)%__SHORTCUTS__.shortcuts[c.toUpperCase()].length;
}
} catch (e) {} // En IE me da un error que no llego a comprender, ¡cómo no!
}
}
// Cargo el proceso en el onload
if (window.addEventListener) {
window.addEventListener("load", function(event) {__SHORTCUTS__.leer_shortcuts(event);}, false);
} else if (window.attachEvent) {
window.attachEvent("onload", function(event) {__SHORTCUTS__.leer_shortcuts(event);});
} else {
document.onload = function(event) {__SHORTCUTS__.leer_shortcuts(event);}
}

Para indicar qué elementos tienen shortcut, modificamos los estilos para mostrar subrayada la primera letra del elemento, para lo cual el elemento debe tener el atributo title con valor “SHORTCUT: [letra]“. Mejorando así la accesibilidad ya que no añadimos ninguna etiqueta para la primera letra. Por supuesto en IE6 no funciona y con la etiqueta legend tampoco me funciona.

*[title~="SHORTCUT:"]:first-letter {
padding-bottom: 2px;
border-bottom: 1px dotted #000000;
}

Para este ejemplo tenemos dos tipos de shortcuts: ‘P’ para ciertos párrafos y ‘C’ para acceder al formulario de comentarios.

Ejemplo