jquerycross-browserwidth

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?


Solution

  • .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