Как да центрираме елемент спрямо друг елемент в сайта?

Отново с MooTools и отново елементарно

1
2
3
4
5
6
7
var doMove = new Fx.Move($("element"));
doMove.start({
    relativeTo: document.body,
    position: 'center',
    edge: false,
    offset: {x:0,y:0}
});

Този скрипт ще центрира посоченият element в центъра на сайта, защото event-a е прикачен към document.body

За да усложним малко “упражнението” може да си направим функция с посоченият по-горе скрипт, която да изпълняваме винаги, когато се премести скрола на сайта или пък се сменят размерите на браузъра.

1
2
3
4
5
6
7
8
9
10
11
12
function moveToCenter() {
	var doMove = new Fx.Move($("element"));
	doMove.start({
	    relativeTo: document.body,
	    position: "center",
	    edge: false,
	    offset: {x:0,y:0}
	});
}
 
window.addEvent("resize", moveToCenter());
window.addEvent("scroll", moveToCenter());

Прикачаме следните event-и:
– Първият event е за resize на браузър прозореца
– Вторият за scroll-a на страницата.