How to get screen width without minus scrollbar

Question

I have an element and need it s width without    vertical scrollbar   Firebug tells me body width is 1280px   Either of these work fine in Firefox   console log     element   outerWidth      console log     element   outerWidth true       detour       child-of-element   offsetParent    console log   detour innerWidth        They all return 1263px  which is the value I m looking for   However all other browser give me 1280px    Is there a cross browser way to get a fullscreen width without    vertical scrollbar

User · Answer

I experienced a similar problem and doing width 100   solved it for me  I came to this solution after trying an answer in this question and realizing that the very nature of an  lt iframe gt  will make these javascript measurement tools inaccurate without using some complex function  Doing 100  is a simple way to take care of it in an iframe  I don t know about your issue since I m not sure of what HTML elements you are manipulating

User · Answer

prop  clientWidth   and  prop  scrollWidth    var actualInnerWidth      body   prop  clientWidth       El  width minus scrollbar width var actualInnerWidth      body   prop  scrollWidth       El  width minus scrollbar width   in JavaScript   var actualInnerWidth   document body clientWidth         El  width minus scrollbar width var actualInnerWidth   document body scrollWidth         El  width minus scrollbar width   P S  Note that to use scrollWidth reliably your element should not overflow horizontally  jsBin demo    You could also use  innerWidth   but this will work only on the body element  var innerWidth      body   innerWidth       Width PX minus scrollbar

User · Answer

Try this       body  html   css  overflow    hidden    var screenWidth1     window  width       body  html   css  overflow    visible    var screenWidth2     window  width    alert screenWidth1      Gives the screenwith without scrollbar alert screenWidth2      Gives the screenwith including scrollbar   You can get the screen width by with and without scroll bar by using this code  Here  I have changed the overflow value of body and get the width with and without scrollbar

User · Answer

Here is what I use   function windowSizes        var e   window          a    inner       if     innerWidth  in window             a    client           e   document documentElement    document body            return           width  e a    Width            height  e a    Height                 window  on  resize   function          console log  windowSizes   width windowSizes   height

User · Answer

Here are some examples which assume  element is a jQuery element      Element width including overflow  scrollbar   element 0  offsetWidth     1280 in your case     Element width excluding overflow  scrollbar   element 0  clientWidth     1280 - scrollbarWidth     Scrollbar width  element 0  offsetWidth -  element 0  clientWidth     0 if no scrollbar

User · Answer

None of these solutions worked for me  however I was able to fix it by taking the width and subtracting the width of the scroll bar  I m not sure how cross-browser compatible this is

User · Answer

You can use vanilla javascript by simply writing   var width   el clientWidth    You could also use this to get the width of the document as follows   var docWidth   document documentElement clientWidth    document body clientWidth    Source  MDN  You can also get the width of the full window  including the scrollbar  as follows   var fullWidth   window innerWidth    However this is not supported by all browsers  so as a fallback  you may want to use docWidth as above  and add on the scrollbar width   Source  MDN

User · Answer

The safest place to get the correct width and height without the scrollbars is from the HTML element  Try this   var width   document documentElement clientWidth var height   document documentElement clientHeight   Browser support is pretty decent  with IE 9 and up supporting this  For OLD IE  use one of the many fallbacks mentioned here

[jquery] How to get screen width without (minus) scrollbar?

Examples related to jquery

Examples related to cross-browser

Examples related to width