jquery window width and window height return different values when viewport has not been resized

Question

I am writing a site using jquery that repeatedly calls   window  width   and   window  height   to position and size elements based on the viewport size   In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated calls to the above jquery functions when the viewport is not resized   Wondering if there is any special case anyone knows of when this happens  or if this is just the way it is  The difference in sizes reported are 20px or less  it appears  It happens in Safari 4 0 4  Firefox 3 6 2 and Chrome 5 0 342 7 beta on Mac OS X 10 6 2  I didn t test other browsers yet because it doesn t appear to be specific to the browser  I was also unable to figure out what the difference depends upon  if it isn t the viewport size  could there be another factor that makes the results differ   Any insight would be appreciated     update   It is not the values of   window  width   and   window  height   that are changing  It s the values of the variables I am using to store the values of the above    It is not scrollbars that are afecting the values  no scrollbars appear when the variable values change  Here is my code to store the values in my variables  which I am doing just so they are shorter     all this is within   document  ready       initially declare the variables to be visible to otehr functions within  ready    var windowWidth     window  width      retrieve current window width var windowHeight     window  height      retrieve current window height var documentWidth     document  width      retrieve current document width var documentHeight     document  height      retrieve current document height var vScrollPosition     document  scrollTop      retrieve the document scroll ToP position var hScrollPosition     document  scrollLeft      retrieve the document scroll Left position   function onm window parameters      called on viewer reload  screen resize or scroll      windowWidth     window  width      retrieve current window width     windowHeight     window  height      retrieve current window height     documentWidth     document  width      retrieve current document width     documentHeight     document  height      retrieve current document height     vScrollPosition     document  scrollTop      retrieve the document scroll ToP position     hScrollPosition     document  scrollLeft      retrieve the document scroll Left position       end function onm window parameters     I inserted an alert statement to probe the variables above against the values they are supposed to be holding  The   item  param   values stay consistent  but my variables change for reasons I can t figure out   I have looked for places where my code might be altering the value of the variables in question  as opposed to just retrieving their set values and can find none  I can post the whole shebang somewhere if that s a possibility

User · Answer

Try to use a    window  load event  or    document  ready because the initial values may be inconstant because of changes that occur during the parsing or during the DOM load

User · Answer

I think what you re seeing is the hiding and showing of scrollbars   Here s a quick demo showing the width change   As an aside  do you need to poll constantly   You might be able to optimize your code to run on the resize event  like this     window  resize function         update stuff

User · Answer

I was having a very similar problem  I was getting inconsistent height   values when I refreshed my page   It wasn t my variable causing the problem  it was the actual height value    I noticed that in the head of my page I called my scripts first  then my css file  I switched so that the css file is linked first  then the script files and that seems to have fixed the problem so far   Hope that helps

User · Answer

Note that if the problem is being caused by appearing scrollbars  putting  body     overflow  hidden      in your CSS might be an easy fix  if you don t need the page to scroll

[jquery] jquery $(window).width() and $(window).height() return different values when viewport has not been resized

Examples related to jquery

Examples related to resize

Examples related to height

Examples related to width

Examples related to viewport