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 (thingToPositio n, leftPosition, topPosition) {
//get element clientWidth and clientHeight
var elWidth = document.getEle mentById(thingT oPosition).clie ntWidth;
var elHeight =
document.getEle mentById(thingT oPosition).clie ntHeight;
//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.getEle mentById(thingT oPosition).styl e.left=(leftPos ition);
document.getEle mentById(thingT oPosition).styl e.top=(topPosit ion);
}

[Matt Kruse]

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

Noah Sussman wrote:[color=blue]
> 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".[/color]

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.posit ion='absolute';
obj.style.visib ility='hidden';
obj.style.displ ay='block';
<retrieve dimenions here>
obj.style.visib ility='';

--
Matt Kruse

http://www.JavascriptToolbox.com

http://www.AjaxToolbox.com

[Noah Sussman]

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

Matt Kruse wrote:[color=blue]
> I'm surprised you don't see the same problem in IE, as it also exists, IIRC.[/color]

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