Contacta (+34) 622 045 404

Estudio de desarrollo front-end, maquetación web, diseño y programación WordPress freelance.

Fundado por Alberto Fortes, diseñador y maquetador web HTML5 responsive design, front-end developer JavaScript y programador WordPress freelance a medida desde 2006.

Especializados en outsourcing con importantes clientes finales.

Cerrar capas con js no intrusivo

23 Febrero, 2009

[Aviso, esto es para novatos]

Un sencillito script de esos para pegarlos en tus global.js.
Se trata del típico icono para cerrar una capa, por ejemplo:

La idea es utilizar jquery para no poner ningún onclick en el enlace y dejar el html limpito.
Para que el SEO no se cabree, utilizaremos el atributo rev, dejando el rel para no follow:

cerrar
var aClose = $('a.closeThis');
aClose.each(function(){
   $(this).click(function(){
        var aRev = $(this).attr('rev');
	var aRevCierre = aRev + '_close';
	if (aRevCierre) {
	   $('#' + aRevCierre).hide('slow');
	}
	$('#' + aRev).hide('slow');
        return false;
   });
});

Este script (que sin jquery no anda ni de lado), recorre todos los links de la página cuya clase sea closeThis, y toma de ellos el contenido del atributo rev que debe ser el nombre de la capa que se quiere cerrar.
Por si acaso estamos usando imágenes redondas de background en el CSS, dicha capa de cierre, si la llamamos nombredelacapa_close y existe en el DOM también se cerrará.