CODEWITHSUNDEEP
javascriptunobtrusive-javascript
user131441
user131441

Reputation:

Using Javascript to Measure the Current Window

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!

Upvotes: 0

Views: 352

Answers (3)

James
James

Reputation: 111920

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

Upvotes: 4

code_burgar
code_burgar

Reputation: 12323

Use jQuery 

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

That will work in all major browsers.

Upvotes: 2

philfreo
philfreo

Reputation: 43814

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.

Upvotes: 2

Related Questions