How to put a border around the browser content viewing area using jquery?

Question

Possible Duplicate:
how to get the browser window size without the scroll bars

How to put a border around the browser content viewing area using using jquery?

Here is what I tried..

 var $windowW = $(window).width();
 var $windowH = $(window).height();
 alert($windowW + "  " + $windowH); // THe results are width 1440 and 745 height
 $("body").css("width", $windowW);
 $("body").css("height", $windowH);
 $("body").css("border","1px solid green");

I have no elements in the body of the document and I am not getting a green border around the width of 1440 and height of 745.

How do I put a border around the viewable area of the browser using the return values from $windowW and $windowH using jquery?

Perhaps there is a typo with the second width line needing to be a height? — Valamas, Nov 22 '11 at 00:28
One small problem, the border width scroll to the right. How do I get the accurate window width without the scrolling to the right? — Yetimwork Beyene, Nov 22 '11 at 00:33
The second question is actually the duplicate, however it seems to be the one you intended to ask. — Tim Post, Nov 22 '11 at 06:19

score 4 · Answer 1 · answered Nov 22 '11 at 04:40

4

You can do it more easily using CSS and Absolute Positioning:

body
{
    border: 2px solid green;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
}

See this fiddle.

answered Nov 22 '11 at 04:40

Saeed Neamati

35,341
41
136
188

This absolute position thing setting the four sides is very useful. Great solution. – Fernando Basso Apr 14 '16 at 12:19
This doesn't work. The border scrolls away. – Aaron Wright Jan 11 '22 at 17:44

GregL · Answer 2 · 2011-11-22T04:04:20.500

As Valamas mentioned, your primary reason appears to be the mistake in setting the width twice.

However, you can also simplify your code somewhat to use the newer 'map' form of the .css() function:

$("body").css({
    width: $(window).width() - 2, // subtract twice the thickness
    height: $(window).height() - 2, // of the border from each dimension
    border: '1px solid green'
});

EDIT: It appears you need to subtract double the width of the border you plan to add from the width and height to avoid showing any scrollbars. I am not 100% sure of why this is, or how to get around it, but it is something to do with the fact that the border adds width to the body, so you need to compensate for that. The code above has been changed to illustrate what I mean.

How to put a border around the browser content viewing area using jquery?

2 Answers2

Linked