CODEWITHSUNDEEP
javascriptscreen
med
med

Reputation: 227

screen width vs visible portion

I have a little problem with JavaScript, to get the screen width we use screen.width which returns the overall screen resolution, is there a command to get the resolution of the visible portion of the browser, like when the browser is not maximized?

Upvotes: 11

Views: 23974

Answers (3)

JCOC611
JCOC611

Reputation: 19719

function width(){
   return window.innerWidth 
       || document.documentElement.clientWidth 
       || document.body.clientWidth 
       || 0;
}

function height(){
   return window.innerHeight 
       || document.documentElement.clientHeight 
       || document.body.clientHeight 
       || 0;
}

Use them to return the height() or width() of the visible window.

JSFiddle example.

Upvotes: 32

madaaah
madaaah

Reputation: 84

I saw that the question was answered, but here is the code I used with an image to ilustrate.

function height(){
return(window.innerHeight)?
window.innerHeight:
document.documentElement.clientHeight||document.body.clientHeight||0;
}
$(document).ready(function(){
$('.first, .second').css('height',height());
});
$(window).resize(function() {
$('.first, .second').css('height',height());
});

JSFiddle Example

Upvotes: 1

NT3RP
NT3RP

Reputation: 15370

The area you're describing is the viewport, and can typically be accessed by using window.innerWidth or window.innerHeight in modern browsers. IE6 is a bit different, but more information on handling the viewport width for all browsers can be found in this tutorial on obtaining viewport size.

Upvotes: 1

Related Questions