CODEWITHSUNDEEP
jqueryscrollbar
univers_
univers_

Reputation: 463

Set html width as width minus scrollbar

I'm having issues with a site where the scroll bars is disabled by various modals, causing the site percentages to change when modals are active.

How can I code the site to generate the entire layout using the html width without the scrollbar? Then, when the modal is active, no CSS recalculation will take place.

Here's the code I'm using:

        $(function() {
            $("html").css({
            "width": outerWidth()
          });
        });

But something is wrong with the syntax I think…

Upvotes: 1

Views: 889

Answers (4)

Eluxor213
Eluxor213

Reputation: 11

Use .outerWidth() to include the width of the scrollbar:

$('body').innerWidth();

Upvotes: 1

univers_
univers_

Reputation: 463

Found a solution…

http://jsfiddle.net/p88Rt/4/

I defined a wrapper for the header with 100% of outerWidth, then position a relative element inside it. It would be cleaner to have no wrapper and definite the width of the header using maths (80% * outerWidth) but not sure of the jQuery syntax. 

$(function() {
$("html").css({
    "width": $(this).outerWidth()
});
$("#header-outer").css({
    "width": $(this).outerWidth()
});

Upvotes: 0

Chris Lam
Chris Lam

Reputation: 3614

The innerWidth of body does not include the width of scrollbar, but outerWidth does:

$('body').innerWidth();

Upvotes: 0

Noah Wetjen
Noah Wetjen

Reputation: 1785

You have to tell jQuery what you want to have the outerWidth() of. In this Case we can use $(this) because you already $("html") in the line above.

$(function() {
    $("html").css({
        "width": $(this).outerWidth()
    });
});

Upvotes: 0

Related Questions