jquery $(window).width() and $(window).height() re

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.

回答1:

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
});

回答2:

Try to use a

$(window).load event

$(document).ready

because the initial values may be inconstant because of changes that occur during the parsing or during the DOM load.

回答3:

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).

回答4:

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.