...

View Full Version : Issue with code that centers html elements



Dan06
07-17-2009, 08:58 PM
My code that centers html elements fails when the html element is large. For example, I have a list of 443 items, which I break into 3 columns within a div. Therefore there are 148 lines in the div. When I use the code below to center the div, the top part of the div is beyond the top of the window screen. Anyone know what part of my code causes/allows for the problem?



function centerPopup(){
// Get data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(".popupArea").height();
var popupWidth = $(".popupArea").width();
//centering
$(".popupArea").css({ "position": "absolute", "top": Math.floor(windowHeight/2)-Math.floor(popupHeight/2), "left": Math.floor(windowWidth/2)-Math.floor(popupWidth/2) });
//only need force for IE6
$(".popupBackground").css({ "height": windowHeight });

}

vwphillips
07-18-2009, 04:12 PM
function centerPopup(){
// Get data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(".popupArea").height();
var popupWidth = $(".popupArea").width();
//centering
$(".popupArea").css({ "position": "absolute", "top": Math.max(zxcWWHS()[3],Math.floor(windowHeight/2)-Math.floor(popupHeight/2)), "left": Math.floor(windowWidth/2)-Math.floor(popupWidth/2) });
//only need force for IE6
$(".popupBackground").css({ "height": windowHeight });

}
function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

Dan06
07-20-2009, 07:56 PM
Thanks for solution; it was easy to follow and made complete sense.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum