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. Desplazar scroll con JQuery, sin necesidad de strollTo
2. Como hacer plugins para jQuery
3. Saber el tamaño de un elemento, width vs outerWidth en jQuery