Element.center()
Snippets are small pieces of code that do not fit in the UvumiTools plugin category. Please note that each of these semi-useful functions requires Mootools 1.2.
Horizontally and vertically centers an element in the window, or within a containing element.
Element.implement({
center : function(relative){
});
if($(relative)){
var windSize = relative.getSize();
var elSize = this.getSize();
var top,left,marginTop,marginLeft;
if(windSize.x < elSize.x){
if(windSize.y < elSize.y ) {
if(relative != window && relative.getStyle('position')=='static'){
this.setStyles({
return this;
}
relative = $(relative);
}else{
relative = window;
}var windSize = relative.getSize();
var elSize = this.getSize();
var top,left,marginTop,marginLeft;
if(windSize.x < elSize.x){
left = 0;
marginLeft = 0;
}else{
marginLeft = 0;
left = '50%';
marginLeft = -(elSize.x/2).toInt();
}marginLeft = -(elSize.x/2).toInt();
if(windSize.y < elSize.y ) {
top = 0;
marginTop = 0;
}else{
marginTop = 0;
top = '50%';
marginTop = -(elSize.y/2).toInt();
marginTop = -(elSize.y/2).toInt();
}marginTop = -(elSize.y/2).toInt();
marginTop = -(elSize.y/2).toInt();
if(relative != window && relative.getStyle('position')=='static'){
relative.setStyle('position','relative');
}this.setStyles({
position:'absolute',
top:top,
left:left,
marginLeft:marginLeft,
marginTop:marginTop
}).inject((relative==window?$(document.body):relative));top:top,
left:left,
marginLeft:marginLeft,
marginTop:marginTop
return this;
Usage:
$('myElement').center();
$('myElement').center($('myOtherElement')); //Center myElement on myOtherElement
$('myElement').center($('myOtherElement')); //Center myElement on myOtherElement
Demo:
