Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get the height and width of the browser viewport without scrollbars using jquery?

Tags:

jquery

How do I get the height and width of the browser viewport without scrollbars using jQuery?

Here is what I have tried so far:

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

This solution does not take into account the browser scrollbars.

like image 650
Yetimwork Beyene Avatar asked Jan 09 '12 19:01

Yetimwork Beyene


8 Answers

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

More info

  • http://api.jquery.com/height/
  • http://api.jquery.com/width/

Using jQuery is not essential for getting those values, however. Use

document.documentElement.clientHeight;
document.documentElement.clientWidth;

to get sizes excluding scrollbars, or

window.innerHeight;
window.innerWidth;

to get the whole viewport, including scrollbars.

document.documentElement.clientHeight <= window.innerHeight;  // is always true
like image 119
Kyle Avatar answered Sep 23 '22 20:09

Kyle


Don't use jQuery, just use javascript for correct result:

This includes scrollbar width/height:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

This excludes scrollbar width/height:

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);
like image 32
Sakata Gintoki Avatar answered Sep 23 '22 20:09

Sakata Gintoki


Here is a generic JS which should work in most browsers (FF, Cr, IE6+):

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}
like image 29
Vilmantas Baranauskas Avatar answered Sep 23 '22 20:09

Vilmantas Baranauskas


You're using the wrong method calls. A viewport is the "window" that's open on the document: how much of it you can see and where.

Using $(window).height() will not give you the viewport size it will give you the size of the entire window, which is usually the size of the entire document though the document could be even larger.

To get the size of the actual viewport use window.innerHeight and window.innerWidth.

https://gist.github.com/bohman/1351439

Do not use the jQuery methods, e.g. $(window).innerHeight(), as these give the wrong numbers. They give you the window's height, not innerHeight.

like image 27
Mikbe Avatar answered Sep 25 '22 20:09

Mikbe


Description

The following will give you the size of the browsers viewport.

Sample

$(window).height();   // returns height of browser viewport
$(window).width();   // returns width of browser viewport

More Information

  • jQuery.height()
  • jQUery.width()
like image 40
dknaack Avatar answered Sep 27 '22 20:09

dknaack


As Kyle suggested, you can measure the client browser viewport size without taking into account the size of the scroll bars this way.

Sample (Viewport dimensions WITHOUT scroll bars)

// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');

// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

Alternatively if you wish to find the dimensions of the client viewport while taking into account the size of the scroll bars, then this sample bellow best suits you.

First don't forget to set you body tag to be 100% width and height just to make sure the measurement is accurate.

body { 
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}

Sample (Viewport dimensions WITH scroll bars)

// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');

// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');
like image 34
Fábio Antunes Avatar answered Sep 26 '22 20:09

Fábio Antunes


The script $(window).height() does work well (showing the viewport's height and not the document with scrolling height), BUT it needs that you put correctly the doctype tag in your document, for example these doctypes:

For html5: <!doctype html>

for transitional html4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Probably the default doctype assumed by some browsers is such, that $(window).height() takes the document's height and not the browser's height. With the doctype specification, it's satisfactorily solved, and I'm pretty sure you peps will avoid the "changing scroll-overflow to hidden and then back", which is, I'm sorry, a bit dirty trick, specially if you don't document it on the code for future programmer's usage.

Moreover, if you are doing a script, you can invent tests to help programmers in your libraries, let me invent a couple:

$(document).ready(function() {
    if(typeof $=='undefined') {
        alert("Error, you haven't called JQuery library");
    }
    if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
    } 
});
like image 25
David L Avatar answered Sep 24 '22 20:09

David L


$(document).ready(function() {

  //calculate the window height & add css properties for height 100%

  wh = $( window ).height();

  ww = $( window ).width();

  $(".targeted-div").css({"height": wh, "width": ww});

});
like image 39
Anamoul ROUF Avatar answered Sep 23 '22 20:09

Anamoul ROUF