Detecting browser client area size on wide screen using javascript

Question

I've been using the following code to detect browser client area width for ages and it wokred 100% with all browsers, including FF, Safari and various versions of IE. However, now when I switched to a new monitor with widescreen resolution (1280x800) this code fails on IE8. It reports clientwidth of 1024 !!!???

Any ideas how to get the correct client area width ?

function getClientWidth() {
  var v=0,d=document,w=window;
  if((!d.compatMode || d.compatMode == 'CSS1Compat') && !w.opera && d.documentElement && d.documentElement.clientWidth)
    {v=d.documentElement.clientWidth;}
  else if(d.body && d.body.clientWidth)
    {v=d.body.clientWidth;}
  else if(xDef(w.innerWidth,w.innerHeight,d.height)) {
    v=w.innerWidth;
    if(d.height>w.innerHeight) v-=16;
  }
  return v;
}

Answer 1

If you use a lot of your own JavaScript, you may want to consider a JavaScript library such as jQuery. $(window).width (Or perhaps $(document).width, I'm not particularly sure to be honest) can do what you want, see here.

Answer 2

The bits in your code where you check for window.opera and subtract 16 pixels are worrying. comp.lang.javascript's FAQ has a decent implementation of this.