offsetHeight and offsetWidth calculating incorrectly on first onclick event, not second

Question

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!

Overdo

Hmm, your code seems to work fine for me? jsfiddle.net/mrtsherman/SdTEf/1 – Mckeown

@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. – Overdo

Yay. Glad you got it solved. Problems like this where everything appears okay, but are not - make my head want to explode! – Mckeown

if you would post that as an answer I would certainly check mark it! – Overdo

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.net/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');
});

Mckeown

You are correct, you're way will work (I tested it to make sure offsetHeight and offsetWidth were correct), except that you cannot resize the window and have the div stay perfectly centered, which is something I am looking for. I am really most interested in why my offsetHeight and offsetWidth are not giving me the correct numbers, as I use this css technique all the time and it always gives me the desired effect. – Overdo

Ahh, I see now. I upvoted your question so hopefully someone gets you a better answer. You could bind the above to the $(window).resize() event, but your method is certainly more elegant. – Mckeown