CODEWITHSUNDEEP
jquerycross-browserwidth
frequent
frequent

Reputation: 28493

How to get screen width without (minus) scrollbar?

I have an element and need it's width without(!) vertical scrollbar.

Firebug tells me body width is 1280px.

Either of these work fine in Firefox:

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

They all return 1263px, which is the value I'm looking for.

However all other browser give me 1280px.

Is there a cross browser way to get a fullscreen width without(!) vertical scrollbar?

Upvotes: 134

Views: 221152

Answers (9)

lukeybytes
lukeybytes

Reputation: 51

I know this is an old question, but the suggested answer didn't work for me either. I found the following code online and tested it in Chrome, Firefox and Safari where it seems to work fine.

if (window.matchMedia("(max-width: 1339px)").matches) { // do something if matches }

Thought I would mention it here in case it helps someone else.

Upvotes: 0

Bengi Besceli
Bengi Besceli

Reputation: 3748

Try this :

$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar

You can get the screen width by with and without scroll bar by using this code. Here, I have changed the overflow value of body and get the width with and without scrollbar.

Upvotes: 10

Benn
Benn

Reputation: 5023

Here is what I use 

function windowSizes(){
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return {
        width: e[a + 'Width'],
        height: e[a + 'Height']
    };  
}

$(window).on('resize', function () {
    console.log( windowSizes().width,windowSizes().height );
});

Upvotes: -1

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

.prop("clientWidth") and .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

in JavaScript:

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

P.S: Note that to use scrollWidth reliably your element should not overflow horizontally

jsBin demo

You could also use .innerWidth() but this will work only on the body element

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar

Upvotes: 194

homebrand
homebrand

Reputation: 1213

None of these solutions worked for me, however I was able to fix it by taking the width and subtracting the width of the scroll bar. I'm not sure how cross-browser compatible this is.

Upvotes: 0

www139
www139

Reputation: 5227

I experienced a similar problem and doing width:100%; solved it for me. I came to this solution after trying an answer in this question and realizing that the very nature of an <iframe> will make these javascript measurement tools inaccurate without using some complex function. Doing 100% is a simple way to take care of it in an iframe. I don't know about your issue since I'm not sure of what HTML elements you are manipulating.

Upvotes: 0

Naman Goel
Naman Goel

Reputation: 1612

The safest place to get the correct width and height without the scrollbars is from the HTML element. Try this:

var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight

Browser support is pretty decent, with IE 9 and up supporting this. For OLD IE, use one of the many fallbacks mentioned here.

Upvotes: 16

Joshua Bambrick
Joshua Bambrick

Reputation: 2699

You can use vanilla javascript by simply writing:

var width = el.clientWidth;

You could also use this to get the width of the document as follows:

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

Source: MDN

You can also get the width of the full window, including the scrollbar, as follows:

var fullWidth = window.innerWidth;

However this is not supported by all browsers, so as a fallback, you may want to use docWidth as above, and add on the scrollbar width.

Source: MDN

Upvotes: 43

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

Here are some examples which assume $element is a jQuery element:

// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar

Upvotes: 12

Related Questions