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

Thanks

MAnca

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

Answer 2

I scrapped the window parameters function and variables and am using the direct jquery calls each time I need to know the document/window sizes... That takes care of the weird values I was getting.

Never got to the bottom of why values stored in those variables were not consistent, but simply replacing each reference to the variables with the values supposed to be stored in them fixed that problem...

on other words, instead of using windowWidth I am now sticking with $(window).width() wherever I need to know that value...

Manca

Answer 3

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.