Using Javascript to Measure the Current Window

Question

Ok, so I'm trying to build a website in which a large picture is the background. I want to be able to load a different size picture based on the user's window size so they (hopefully) don't see any blank space. I want to use JavaScript to measure the size of the current screen. Then, based on the size of the window, I would like to load in an image that corresponds to that resolution.

However, when looking online, I could not find a standard way to get the window size in all browsers. Any help is very appreciated! Also, if you have another idea of how to implement this, let me know!

Answer 1

Prototype: document.viewport

JQuery: window

Answer 2

jQuery, YUI, and other JavaScript frameworks have solved this problem. Take a look at their solutions, even if you don't want to plug in a full framework.

Answer 3

Use jQuery

var height = $(window).height();
var width = $(window).width();

That will work in all major browsers.

Answer 4

There is a solution written at this link Here

I have tested it on ff, seems ok.

Answer 5

A user's window is unlikely to vary hugely in size during use. It's best to only provide one image, and then scale it depending on the size. This can be achieved through CSS alone.

img#my-big-background-image { 
    width: 100%;
}