15 octubre, 2008

Bookmarklet anti-distracción

En algún momento a lo largo del día de hoy, me he quedado mirando la típica columna estrecha que aparece junto al contenido de muchas páginas y que suele incluir enlaces, fotos y publicidad que no hacen sino molestar y distraer la atención. Tengo instalada la extensión Nuke Anything Enhanced que permite cualquier objeto con el menú contextual, pero no deja de ser un juego intentar eliminar así las malditas columnas.

Así que se ha encendido la bombillita y he creado un bookmarklet que al ser pulsado identifica las capas DIV que tienen un ancho inferior a 400 píxeles y las oculta. Arrastrar este enlace (cols) a la barra de herramientas del navegador y pulsar sobre ella en cualquier página que tenga una de esas columnas para verla desaparecer (lamentablemente este blog es demasiado limpio para servir como prueba ;-).

// definición de la función recursiva que busca los divs empezando por un elemento
var hideNarrowCols= function(elm) {
 if ( typeof elm.childNodes == "undefined" ) return;
 // comprobación de cada hijo del elemento actual
 for ( var i=0; i<elm.childNodes.length; i++ ) {
   var c= elm.childNodes[i];
   // si no es un DIV no interesa y continua con el siguiente hijo
   if ( c.tagName != "DIV" ) continue;
   if ( !c.style ) return;
   // si su anchura es inferior a 400, la oculta
   if ( c.clientWidth<400 ) c.style.display= 'none';
   // comprueba a su vez los hijos de este DIV (recursividad)
   hideNarrowCols(c);
 }
};
// empieza a buscar directamente a partir de document.body
hideNarrowCols(document.body);
// evita devolver un valor para evitar que la página entera lo muestre
void(0);
Addendum: David Delgado propone la siguiente versión del bookmarklet que tiene en cuenta también la altura de la capa y usa la función getElementsByTagName que es mucho más lógica. (cols)
var hideNarrowCols= function(sqr){
  var elm= document.getElementsByTagName('DIV');
  for ( var i=0; c=elm[i]; i++) { 
    if ( c.offsetWidth < sqr && c.offsetHeight > sqr )
      c.style.visibility='hidden';
  }
};
hideNarrowCols(400);
void(0);
Addendum: La versión que estoy usando actualmente, también cambia el fondo de las capas y de la página a blanco para facilitar aún más la lectura.
var hideNarrowCols=function(sqr){
  var elm=document.getElementsByTagName('DIV');
  for(var i=0;c=elm[i];i++){
    if(c.offsetWidthsqr) c.style.display='none';
    c.style.background='#fff';
  }
};
hideNarrowCols(400);
document.body.background='';
document.body.style.backgroundColor='white';
document.body.style.color='black';
document.body.aLink='#ff0000';
void(0);

4 comentarios:

David Delgado dijo...

Hola, este código esta bastante bien, pero permíteme un par de cositas:
1.- Este código oculta capas que no debería ocultar, por ejemplo en la web www.tucasa.com hace desaparecer todo el contenido menos la cabecera.
2.- ¿Por qué recorres todos los elementos si la DOM ya nos provee de una función para obtener los elementos con tagName en concreto (getElementsByTagName)?
Me he permitido modificaar un poco el código, para que tenga en cuenta el alto del DIV, si el ancho es inferior al parametros que pasamos y el alto es mayor hacemos que la capa no se muestre, este código lo he probado en IE7, FireFox 3 y Chrome y funciona perfectamente. Lógicamente se puede modificar para buscar TD's y formatos de publicidad conocidos.

javascript:var hideNarrowCols=function(sqr){var elm=document.getElementsByTagName('DIV');for(var i=0;c=elm[i];i++){if(c.offsetWidth<sqr&&c.offsetHeight&rt;sqr)c.style.visibility='hidden';}};hideNarrowCols(400);void(0);

Digitta dijo...

Gracias por el código, David. Lo posteo como alternativa. Tienes toda la razón con el getElementsByTagName, no se me había pasado por la cabeza. Por cierto, lo de que oculte capas que no debe ya lo he experimentado (también he modificado mi bookmarklet con lo del alto mínimo), pero es complejo darle esa "inteligencia" a un bookmarklet. En cualquier caso la mayor parte de las veces funciona correctamente y con eso me basta. Como mucho me plantearía la posibilidad de restaurar la visibilidad en caso de volver a aplicarlo si no se aplica correctamente en la página actual (como un interruptor?).

digitta.com dijo...

Acabo de descubrir el bookmarklet de PrintWhatYouLike.com que viene a ser un completo editor que permite cambiar cualquier elemento de la página para prepararla para impresión (o para su lectura).

digitta.com dijo...

De nuevo otra página con un bookmarklet interesante con el mismo propósito que el indicado en el artículo:
http://lab.arc90.com/experiments/readability/

Publicar un comentario en la entrada

Últimos links en indiza.com