13.8.10

Remover Margenes de los Input Checkbox / Radio en Internet Explorer 6

El funesto Internet Explorer 6 se renderea con unos molestos espacios que rodean a los input checkbox y radio. Para eliminarlos debemos asignarles un alto y un ancho en nuestra hoja de estilo. Idealmente, como siempre, es encerrar estos estilos "de mas" dentro de un comentario condicional.

CSS:
input.checkbox, input.radio{
   height: 13px;
   width: 13px;
}
HTML:
<input type="checkbox" class="checkbox" />
<input type="radio" class="radio" />

10.8.10

Pestañeo de Imagenes de Fondo en Internet Explorer 6

Para arreglar este desperfecto de IE6 debemos agregar en nuestra hoja de estilos (idealmente con comentario condicional, ya que no valida.) la siguiente linea de código:
html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
Fuente

22.7.10

Hack CSS Safari - Chrome - Firefox

Este Hack es para Safari - Chrome, ya que ambos navegadores usan el motor webkit:

body:nth-of-type(1) .miEstilo{
   ...
}

Muy util para cuando tenemos problemas con los paddings, ya que estos navegadores en ocasiones los interpretan de distinta manera.

El hack para Firefox es:

/* Target all Firefox */ 
@-moz-document url-prefix() { .selector { color: red; } }

13.1.10

Lado Derecho vs Lado Izquierdo del Cerebro

El Test de el lado derecho vs lado izquierdo de el cerebro... ¿Ves a la bailarina girando en el sentido del reloj o en contra?

Si es en el sentido del reloj, entonces tu usas mas el lado derecho de el cerebro y viceversa.

Ejercicio: Si sólo la vez girando en un solo sentido, focalízate en tratar de verla girar en el otro sentido.

Funciones de el Lado Izquierdo

  • Usa la lógica
  • Orientado al detalle
  • Reinan los hechos
  • Palabras y el Lenguaje
  • Presente y pasado
  • Matemáticas y Ciencias
  • Puede comprender
  • Refleja entendimiento
  • Reconoce
  • Percepción de Patrón/Orden
  • Saber objeto nombre
  • Basado en realidad
  • Forma Estrategias
  • Práctico
  • Seguro

Funciones de el Lado Derecho

  • Usa sentimientos
  • Orientado a "Imágenes Globales"
  • Gobierna la imaginación
  • Símbolos e imágenes
  • Presente y futuro
  • Filosofía & Religión
  • Puede "entenderlo" (es decir: significado)
  • Creencias
  • Apreciar
  • Percepción espacial
  • Saber objeto función
  • Basado en fantasías
  • Presenta posibilidades
  • Impetuoso
  • Toma riesgos
Fuente

14.12.09

Tabla con filas y columnas destacables con hover mediante jQuery


Por razones de usabilidad, en tablas con mucho contenido, puede ser util detacar la fila donde una esta posicionado.

Realizar un destacado de filas con el evento hover mediante jQuery es simple. Sólo basta con atar el evento hover a la fila y estableciendo los 2 eventos(mouseenter / mouseleave).
Para complementar esto, busque el método para agregar simultaneamente un destacado a la columna por la cual se esta pasando con el mouse.

Para esto necesitamos saber la ubicación (index) de la celda para asi poder agregar el estilo destacado a las celdas de las otras filas, para esto necesitaremos agregar el evento jQuery hover a la celda (td) es que uno se encuentra posicionado y no a la fila (tr). Sabiendo esto, ya podremos recorrer cada fila de la tabla buscando el index obtenido.

El Javascript:
$(document).ready(function(){

$("table tbody tr:odd").addClass("odd");         

function celdasReferencia(e){
var indexCelda = $(e).parent().find("td").index(e);
var indexTit   = indexCelda+1;
var selCabec   = $(e).parents("table").children("thead").find("th:eq("+indexTit+")");
var selCeldas  = $(e).parent().siblings("tr").find("td:eq("+indexCelda+")");
var conjuntoCeldas = selCabec.add(selCeldas);
return conjuntoCeldas;
}; 

$("td").hover(
function(){   
$(this).addClass('celdaSel').parent().addClass('filaSel');
celdasReferencia(this).addClass('colSel');
},function(){
$(this).removeClass('celdaSel').parent().removeClass('filaSel');
celdasReferencia(this).removeClass('colSel');
}
);
});
DEMO