Rick Strahl's Weblog  

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All Things Web
Contact   •   Articles   •   Products   •   Support   •   Advertise
Sponsored by:
Markdown Monster - The Markdown Editor for Windows

Element.clientWidth/offsetWidth in IE and Mozilla


:P
On this page:

So I'm working on some Javascript that needs to draw a shadow panel underneath another panel. What I need to accomplish is to basically copy the dimension of the first panel and then shift it off a little bit. This is pretty easy to do in IE with the following:

 

if (Context.ShadowOffset != 0)

{

     var Panel2 = document.getElementById(Context.ControlId + '_Shadow');

     Panel2.style.position = 'absolute';

     Panel2.style.top = (Top + Context.ShadowOffset).toString() + 'px';

     Panel2.style.left = (Context.LastMouseLeft + Context.ShadowOffset +2).toString() + 'px';

     Panel2.style.width = Panel.offsetWidth.toString() + 'px';

     Panel2.style.height = Panel.offsetHeight.toString() + 'px';

     Panel2.style.display = '';

}

 

Works great in IE with the shadow showing up neatly under the main panel. clientWidth properly returns the current dynamic client width of the DIV tag that is the main panel.

 

In FireFox, clientHeight seems to work properly adjusting for the size of the content in the DIV tag, but the clientWidth stays doggedly fixed to the width set with the style.

 

Well, as it turns out FireFox does in fact use the explict width setting for the style when determining clientWidth/clientOffset. The solution to get this to work is to clear out the style:

 

Panel.style.width = '';
Panel.style.height = '';

 

before retrieving the clientwidth and if necessary resetting it afterwards. By doing this the Panel style width is now non-existant and Mozilla apparently starts calculating the actual client width instead of just lazily using the fixed value. Note that this works only if your content autosizes properly. If you have content that is way out of control and requires fixed widths, this code will not work. In that case it's best to constrain the client content (like a table or another Div) to a certain size to enforce the width of the outer DIV.

 

Here's an example of this as part of my wwHoverPanel Control sample I'm going to be posting in a couple of days.

 

http://www.west-wind.com/presentations/wwHoverPanel/sample/HoverList.aspx

 

and with a live sample in our West Wind Web Store:

 

http://www.west-wind.com/wwStore/itemlist.aspx

 

BTW, there's a great link on the MSDN site that provides all of the different dimension calculations:

 

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp

 

It looks like most of these are now also supported by Mozilla even though their not standards compliant.

 


The Voices of Reason


 

Tim Haines
February 05, 2006

# re: Element.clientWidth/offsetWidth in IE and Mozilla

Nice work Rick - that's pretty awesome. One tiny snag is that the shadow disappears if you move the mouse off the link and onto the hovered panel itself. Brilliant tho.

Rick Strahl
February 05, 2006

# re: Element.clientWidth/offsetWidth in IE and Mozilla

Thanks Tim. I missed a little bug in the ShowPanel routine. Fixed.

Fabio
February 06, 2006

# re: Element.clientWidth/offsetWidth in IE and Mozilla

Really nice!

Some hints:
In Opera the shadow is not transparent, and in Firefox throws 8 css errors (I'm using FireBug).

Ragards

Doug Osborne
February 06, 2006

# re: Element.clientWidth/offsetWidth in IE and Mozilla

Wow - strong demo Rick - looks great!

steve
February 06, 2006

# re: Element.clientWidth/offsetWidth in IE and Mozilla

One word: bitchin'!

However, your source include a WebParts reference -- so is this 2.0 only?

Rick Strahl
February 06, 2006

# re: Element.clientWidth/offsetWidth in IE and Mozilla

Fabio, yes know it won't render transparent in all browsers. It'll use CSS Opacity or IE's Alpha filter for the opacity.

The CSS errors are coming from my page style sheet - most of them are for the scrollbars I think, but I'll take another look at that.

Steve, yes it's 2.0 at the moment. The WebResource reference (not Web parts) is configurable - you can also embed the JS file directly into the page or as an external JS file. The control itself should backport easily, but the demos are for 2.0.

I'll have more info probably tomorrow with much more information on this control as it does a lot more than the hover panel stuff including page method callbacks and two way JSON object passing.

Pete D
March 08, 2006

# re: Element.clientWidth/offsetWidth in IE and Mozilla

Hi Rick,

Been lurking for a while but this caught my interest. Have you looked at the Prototype javascript library and script.ulious library thats built on top of it, take alot of the sting out of effects and cross browser element handling. I've been messing with it alot lately and its pretty smart. Might save you some time and headaches at least?

Pete

runsun pan
March 20, 2006

# re: Element.clientWidth/offsetWidth in IE and Mozilla

Hi Rick and others,

Do you know how to get body.clientWidth when the window is smaller than the tool bars on top? I found that when window width is narrower than the tool bar, both "body.clientWidth" and "body.scrollWidth" of FireFox actually report the width of toolbar but not that of window, preventing me from getting the real window width.

#
July 06, 2006

# re: Element.clientWidth/offsetWidth in IE and Mozilla

Thank you !

R.
August 31, 2006

# re: Element.clientWidth/offsetWidth in IE and Mozilla

Thanks a lot!

# DotNetSlackers: Element.clientWidth/offsetWidth in IE and Mozilla


Pingback
January 26, 2007

# offsetheight - SWiK


Pingback
January 31, 2007

# offsetwidth - SWiK


Pingback
February 05, 2007

# getoffsetheight - SWiK


Pingback
February 12, 2007

# getoffsetwidth - SWiK


szczepan78
February 22, 2007

# re: Element.clientWidth/offsetWidth in IE and Mozilla

<quote>
It looks like most of these are now also supported by Mozilla even though their not standards compliant.
</quote>

:)

Nah-ha!

It's the other way around, dear MS MVP...

Pingback
May 08, 2007

# Firefox getoffsetheight - SWiK


Ben Althauser
August 17, 2009

# re: Element.clientWidth/offsetWidth in IE and Mozilla

curious if you could use something similar to -

Panel.removeAttribute("style"); 

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2024