how to get browser's width via javascript

beetle_jaipur · March 30th, 2007, 08:12 AM

Hi,

i am completely new to java script, and want to add some java script code into my web page, there is a little problem with this.

Objective : how to get width of the browser

javscript file :
......
......
CONTAINER_WIDTH = document.getElementById("CONTAINER").style.width;
......

css :

#CONTAINER {
    overflow:hidden;
    height:1.4em;
    width:auto; /* works well in firefox not in IE*/
/* width:1000px i have to give value for IE */
}

problem : i am creating a floting web page, so i cannot give a fixed value of container's width, is there any method in javascript so that i can get the width of the browser and provide it to this variable so that my page design remains floting. i just want that, container just cover the whole window.

i have checked for this forum, but could not get this, and tried some screen.width and other function too, but did not get the solution

all suggestions are welcome,

thanks for hearing

regards,

ashok sharma

rauzer · March 31st, 2007, 07:34 AM

This is not originally mine, but also I don't know who originally wrote this. I use it to calulate heights, my widths are always 100% browser width. It calculates the browser's height and width. Hope that this helps:

Code:

viewport =
{
   getIECanvas: function ()
   {
      var canv = null;
      if (!window.opera && document.all && typeof document.body.clientWidth != "undefined")
      {
         var cm = document.compatMode && document.compatMode == "CSS1Compat";
         canv = cm ? document.documentElement : document.body;
      }
      return canv;
   },

   getWinWidth: function ()
   {
      var canv;
      if ( canv = this.getIECanvas() )
         this.width = canv.clientWidth;
      else
         this.width = window.innerWidth - 18;
   },

   getWinHeight: function ()
   {
      var canv;
      if (canv = this.getIECanvas())
         this.height = canv.clientHeight;
      else
         this.height = window.innerHeight - 18;
   },

   getScrollX: function ()
   {
      var canv;
      if (canv = this.getIECanvas())
         this.scrollX = canv.scrollLeft;
      else if (window.pageXOffset)
         this.scrollX = window.pageXOffset;
      else if (window.scrollX)
         this.scrollX = window.scrollX;
      else
         this.scrollX = 0;
   },

   getScrollY: function ()
   {
      var canv;
      if (canv = this.getIECanvas())
         this.scrollY = canv.scrollTop;
      else if (window.pageYOffset)
         this.scrollY = window.pageYOffset;
      else if (window.scrollY)
         this.scrollY = window.scrollY;
      else
         this.scrollY = 0;
   },

   getAll: function ()
   {
      this.getWinWidth();
      this.getWinHeight();
      this.getScrollX();
      this.getScrollY();
   }
};

So you'd get something like:

Code:

viewport.getWinWidth();
object.style.width = (viewport.width-200) + "px";

Thanks,Erik.

beetle_jaipur · April 2nd, 2007, 03:11 AM

Thanks Erik

it helped me a lot

thanks for your consideration

ashok sharma