determining available area

**Richard Cornford** · May 17 '06, 08:45 PM

Re: determining available area

Steve Sobol wrote:[color=blue]
> I need to use JavaScript and the DOM to determine the available
> amount of browser space - the total size of the browser window
> minus whatever space is used by chrome.
>
> window.innerHei ght and window.innerWid th seem to work fine in
> Opera 8 and Firefox 1.5.[/color]

My interpretation of "minus whatever space is used by chrome" would be
minus the scroll bars (if any), and innerWidth/Height include the scroll
bars in its dimensions.
[color=blue]
> In IE, I've read that you need to use
> document.body.c lientHeight and .clientWidth[/color]

In an out of date, or too superficial source. The pertinent values of
clientWidth/Height depend on which mode (as in, the value of -
document.compat Mode -) IE 6 is in. If it is in 'backCompat' mode (and on
IE <=5.5) the values are read from the - body - element, otherwise (IE 6
in 'CSS1Compat' mode) the values are to be read from the -
documentElement -.
[color=blue]
> but that seems to only give you the dimensions of the box
> created by your <body> tag.[/color]

Which IE version, in which mode (if IE 6)?
[color=blue]
> Whatever solution I end up using needs to work in IE. I'm
> assuming the window.innerHei ght/innerWidth deal will work
> in Konqueror and Safari; please correct me if I'm wrong about
> that.
>
> I am looking at coding for FireFox 1.5+, IE 6+, Opera 8+, and
> whatever the latest versions are of Safari and Konqueror.[/color]

Have a look at:

<URL:
http://groups.google.com/group/comp....87f756c5a471dc[color=blue]
>[/color]

Richard.

**Matt Kruse** · May 17 '06, 10:05 PM

Re: determining available area

Steve Sobol wrote:[color=blue]
> I need to use JavaScript and the DOM to determine the available
> amount of browser space[/color]

This is typically called the "viewport" size, and it is complicated by
quirks/standards mode differences in IE.

Here is a snippet from my lib which finds these dimensions and should be
cross-browser. I would be very interested in hearing of any problems or
quirks in specific browsers.

// Functions for find details about the user's screen
// =============== =============== =============== =====
var Screen = (function() {

var screen = {};

// ...snip...

// Get the width of the viewport (viewable area) in the browser window
// --------------------------------------------------------------------
screen.getViewp ortWidth = function() {
if (!document.comp atMode || document.compat Mode=="CSS1Comp at") {
return document.docume ntElement.clien tWidth;
}
else if (document.compa tMode) {
return document.body.c lientWidth;
}
return zero(self.inner Width);
}

// Get the height of the viewport (viewable area) in the browser window
// --------------------------------------------------------------------
screen.getViewp ortHeight = function() {
if (!window.opera && (!document.comp atMode ||
document.compat Mode=="CSS1Comp at")) {
return document.docume ntElement.clien tHeight;
}
else if (document.compa tMode && !window.opera) {
return document.body.c lientHeight;
}
return zero(self.inner Height);
}

return screen;
})();

--
Matt Kruse

JavascriptToolbox.com - Domain for sale

http://www.JavascriptToolbox.com

Ajax Toolbox – Tools for Ajax / XMLHttpRequest / Remote Scripting Developers

http://www.AjaxToolbox.com

**Steve Sobol** · May 19 '06, 06:35 AM

Re: determining available area

Richard Cornford wrote:[color=blue]
> Steve Sobol wrote:[color=green]
>> I need to use JavaScript and the DOM to determine the available
>> amount of browser space - the total size of the browser window
>> minus whatever space is used by chrome.
>>
>> window.innerHei ght and window.innerWid th seem to work fine in
>> Opera 8 and Firefox 1.5.[/color]
>
> My interpretation of "minus whatever space is used by chrome" would be
> minus the scroll bars (if any), and innerWidth/Height include the scroll
> bars in its dimensions.[/color]

"Viewport" is the term used by Matt Kruse. I was drawing a blank when trying
to remember the word I wanted to use.
[color=blue][color=green]
>> In IE, I've read that you need to use
>> document.body.c lientHeight and .clientWidth[/color]
>
> In an out of date, or too superficial source. The pertinent values of
> clientWidth/Height depend on which mode (as in, the value of -
> document.compat Mode -) IE 6 is in. If it is in 'backCompat' mode (and on
> IE <=5.5) the values are read from the - body - element, otherwise (IE 6
> in 'CSS1Compat' mode) the values are to be read from the -
> documentElement -.
>[color=green]
>> but that seems to only give you the dimensions of the box
>> created by your <body> tag.[/color]
>
> Which IE version, in which mode (if IE 6)?[/color]

It's IE6/WinXP SP2. I'm not sure which mode! I had always assumed that, as in
Mozilla, the presence of a DOCTYPE would put the browser into "Standards"
mode. But I've never done a project where I've had to worry about this type
of issue.

If it matters, I'm using a DOCTYPE (HTML 4.0 Strict).

Matt Kruse offered getViewportHeig ht() and getViewportWidt h() in the post
following yours. I'm trying those functions now.

--
Steve Sobol, Professional Geek ** Java/VB/VC/PHP/Perl ** Linux/*BSD/Windows
Apple Valley, CA
Resident of Southern California -
the home of beautiful people and butt-ugly traffic jams

determining available area

determining available area

Comment

Comment

Comment