Web 2.0 Tips

Este es un tip muy útil, a la hora de diseñar, cada vez utilizamos mas los “pop up divs” y no tanto los Pop up Windows.

Cuando vamos a crear un div, absoluto o fixeado, por lo general utilizamos para centrar “top” y “left” en porcentaje o en pixeles. Pero en algunas pantallas, chicas o grandes, no nos va a quedar como mas nos gustaría, y eso influye negativamente en la experiencia del usuario.

Con esta solución, se acaba el problema.

Acá les dejo la funcion en jQuery que vamos a utilizar.

jQuery.fn.center = function () {
		this.css("position","absolute");
		//this.css("position","fixed"); Tambien podemos usar FIXED si queremos que al scrollear se quede fijo.
		this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
		this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
		return this;
}

Una vez que escribimos la función, lo aplicamos en nuestro div.

$(".popdiv").center();

Diganme que les pareció!

Tips relacionados:

1. Como hacer plugins para jQuery
2. Desplazar scroll con JQuery, sin necesidad de strollTo
3. Zepto, un jQuery mas ligero
4. Saber el tamaño de un elemento, width vs outerWidth en jQuery
5. Como inhabilitar el borde de los forms de Webkit onFocus. (CSS)