I have written the following script to display a hidden element, then fix it's position to the center of the page.

function popUp(id,type) {
var popUpBox = document.getElementById(id);

popUpBox.style.position = "fixed";
popUpBox.style.display = "block";

popUpBox.style.zIndex = "6";

popUpBox.style.top = "50%";
popUpBox.style.left = "50%";

var height = popUpBox.offsetHeight;
var width = popUpBox.offsetWidth;
var marginTop = (height / 2) * -1;
var marginLeft = (width / 2) * -1;

popUpBox.style.marginTop = marginTop + "px";
popUpBox.style.marginLeft = marginLeft + "px";
}

When this function is called by an onclick event, the offsetHeight and offsetWidth are calculated incorrectly, thus not centering the element correctly. If I click the onclick element a second time, the offsetHeight and offsetWidth calculate correctly.

I have tried changing the order in every way I can imagine, and this is driving me crazy! Any help is very much appreciated!

I have written the following script to display a hidden element, then fix it's position to the center of the page.

function popUp(id,type) {
var popUpBox = document.getElementById(id);

popUpBox.style.position = "fixed";
popUpBox.style.display = "block";

popUpBox.style.zIndex = "6";

popUpBox.style.top = "50%";
popUpBox.style.left = "50%";

var height = popUpBox.offsetHeight;
var width = popUpBox.offsetWidth;
var marginTop = (height / 2) * -1;
var marginLeft = (width / 2) * -1;

popUpBox.style.marginTop = marginTop + "px";
popUpBox.style.marginLeft = marginLeft + "px";
}

When this function is called by an onclick event, the offsetHeight and offsetWidth are calculated incorrectly, thus not centering the element correctly. If I click the onclick element a second time, the offsetHeight and offsetWidth calculate correctly.

I have tried changing the order in every way I can imagine, and this is driving me crazy! Any help is very much appreciated!

• javascript
• onclick
• height
• hidden
• offsetwidth

• Hmm, your code seems to work fine for me? jsfiddle/mrtsherman/SdTEf/1 – mrtsherman Commented Sep 13, 2011 at 21:13
• 3 @mtrsherman, THANK YOU. You're jsfiddle showed me the error of my ways. Let it be noted: if you do not define a height and width for the element you wish to determine the height and width of, you will not get the correct height and width using offsetHeight and offsetWidth. – saoyr5 Commented Sep 14, 2011 at 13:44
• Yay. Glad you got it solved. Problems like this where everything appears okay, but are not - make my head want to explode! – mrtsherman Commented Sep 14, 2011 at 14:02
• if you would post that as an answer I would certainly check mark it! – saoyr5 Commented Sep 14, 2011 at 14:02

1 Answer 1

I am guessing your height and width are not defined on the parent. See this fiddle where it works fine. Boy I'm smart. http://jsfiddle/mrtsherman/SdTEf/1/

Old Answer I think this can be done a lot more simply. You are setting the top and left properties to 50%. This will place the fixed element slight off from the center. I think you are then trying to pull it back into the correct position using negative margins. Instead - just calculate the correct top/left values from the start and don't worry about margin. Here is a jQuery solution, but it can be easily adapted to plain js. I also think your current code won't work if the window has been scrolled at all.

//this code will center the following element on the screen
$('#elementid').click(function() {
    $(this).css('position','fixed');
    $(this).css('top', (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop() + 'px');
    $(this).css('left', (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft() + 'px');
});