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.

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

Solution 2

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.

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

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

View more solutions

Comments

[Manca Weeks]

btw, you were right after all... while troubleshooting I noticed there were scrollbars. they appeared so briefly that they could not be seen except in debug mode with the script paused in mid-execution. once I removed the above variables and function, some elements still jumped from position - it had to do with the order of script steps - I just had to make sure I reset the div holding my inserted images to css left:0 before inserting the image. moral to the story: just because scrollbars don't appear long enough to be seen, doesn't mean they weren't there!

[Manca Weeks]

Actually, my original problem was that the way my elements were positioning themselves around the page was causing scrollbars to appear for a fraction of a second -enough for the measurement to be skewed but not enough for the eye to catch it... I figured this out once I put alert statements in between my javascript statements to break the code into distinct states. I did that so I could have the alerts report the measurements at every stage in the code execution. That's when I noticed that one of the states caused scrollbars to appear -which happened to be the state the measurement was taken.

[sbuck]

I can confirm the same thing with the scroll bars. I'd do a read of $(window).height() after resizing the browser and it might show something like 500. Then i'd refresh (without resizing the browser) and it'd show something larger like 700. In my case, I was able to fix it by just doing overflow:hidden on the body, because I don't ever want scrollbars to turn on. Once I did that, the height report was consistent.

[MarkP]

I would also use this question: stackoverflow.com/questions/2854407/… so you can check once the resize event has finished before doing anything. Your script will run what ever is in the .resize() function every pixel you resize, so better practice is to wait.