Hidden elements have zero clientWidth and clientHeight in Firefox! Is there a workaround?

[Noah Sussman]

Hello,

I am writing a function to reposition an element based on whether one
of its edges is outside the visible area of the browser window (the
code is below). My client has asked for code that runs in IE6 and
Firefox. However, I am having a problem in Firefox.

I've recently discovered that Firefox considers the clientWidth and
clientHeight of hidden elements to be "0". I am getting this result on
elements with the CSS property value "display: none". As soon as I
give the elements "display: block," then both clientWidth and
clientHeight contain their expected values again. I've tried hiding
elements on several different pages, and each time I have experienced
the same problem with getting their dimensions.

Unfortunately, I can't just make the elements visible _before_ I get
their dimensions. If I did that, then the elements would be visible
before they have been positioned, which creates an ugly "flicker"
effect.

I have not had any trouble getting the dimensions of hidden elements in
IE. Assuming this is a known issue in Firefox, does anyone know of a
workaround?

Thanks for reading my post,
Noah

===CODE===
This function does not position elements in Firefox that have CSS
"display: none". I've cleaned up my actual production code a bit for
readability's sake; but I would be happy to post the ugly original too
if that would help

function aboveTheFold (thingToPosition, leftPosition, topPosition) {
//get element clientWidth and clientHeight
var elWidth = document.getElementById(thingToPosition).clientWidth;
var elHeight =
document.getElementById(thingToPosition).clientHeight;
//get window width and height, from an external function:
var windowWidth = getWindowHeight();
var windowHeight = getWindowWidth();
//keep popups on screen and above the fold
if ((leftPosition + elWidth) > (windowWidth)) {
leftPosition = windowWidth - elWidth;
}
if ((topPosition + elHeight) > (windowHeight)) {
topPosition -= (topPosition + elHeight) - windowHeight;
}
document.getElementById(thingToPosition).style.left=(leftPosition);
document.getElementById(thingToPosition).style.top=(topPosition);
}

 

[Matt Kruse]

I've recently discovered that Firefox considers the clientWidth and
clientHeight of hidden elements to be "0". I am getting this result
on elements with the CSS property value "display: none".

I'm surprised you don't see the same problem in IE, as it also exists, IIRC.

The solution is to set these properties via script in this order:
obj.style.position='absolute';
obj.style.visibility='hidden';
obj.style.display='block';
<retrieve dimenions here>
obj.style.visibility='';

 

[Noah Sussman]

I'm surprised you don't see the same problem in IE, as it also exists, IIRC.

Upon closer examination, the code I posted did cause a "flicker" when
repositioning windows in IE. It was just less broken than in FF

Thanks for the solution! I just tested my updated code in current
versions of IE, FF and Safari; it works smoothly in all three.

Cheers,
Noah