determining available area

Steve Sobol

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.innerHeight and window.innerWidth seem to work fine in Opera 8 and
Firefox 1.5. In IE, I've read that you need to use document.body.clientHeight
and .clientWidth but that seems to only give you the dimensions of the box
created by your <body> tag.

Whatever solution I end up using needs to work in IE. I'm assuming the
window.innerHeight/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.

Thanks in advance -
SJS

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

May 17 '06 #1

Subscribe Post Reply

4873

Richard Cornford

Steve Sobol wrote:

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.innerHeight and window.innerWidth seem to work fine in
Opera 8 and Firefox 1.5.
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.
In IE, I've read that you need to use
document.body.clientHeight and .clientWidth
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.compatMode -) 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 -.
but that seems to only give you the dimensions of the box
created by your <body> tag.
Which IE version, in which mode (if IE 6)?
Whatever solution I end up using needs to work in IE. I'm
assuming the window.innerHeight/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.
Have a look at:

<URL:
http://groups.google.com/group/comp....87f756c5a471dc

Richard.

May 17 '06 #2

Matt Kruse

Steve Sobol wrote:

I need to use JavaScript and the DOM to determine the available
amount of browser space

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.getViewportWidth = function() {
if (!document.compatMode || document.compatMode=="CSS1Compat") {
return document.documentElement.clientWidth;
}
else if (document.compatMode) {
return document.body.clientWidth;
}
return zero(self.innerWidth);
}

// Get the height of the viewport (viewable area) in the browser window
// --------------------------------------------------------------------
screen.getViewportHeight = function() {
if (!window.opera && (!document.compatMode ||
document.compatMode=="CSS1Compat")) {
return document.documentElement.clientHeight;
}
else if (document.compatMode && !window.opera) {
return document.body.clientHeight;
}
return zero(self.innerHeight);
}

return screen;
})();
--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

May 17 '06 #3

Steve Sobol

Richard Cornford wrote:

Steve Sobol wrote:
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.innerHeight and window.innerWidth seem to work fine in
Opera 8 and Firefox 1.5.

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.

"Viewport" is the term used by Matt Kruse. I was drawing a blank when trying
to remember the word I wanted to use.

In IE, I've read that you need to use
document.body.clientHeight and .clientWidth

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.compatMode -) 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 -.
but that seems to only give you the dimensions of the box
created by your <body> tag.

Which IE version, in which mode (if IE 6)?

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 getViewportHeight() and getViewportWidth() 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

May 19 '06 #4

by: Cliff Wells | last post by:

Hi, I'm writing an application that needs to know if an Internet connection is available. Basically, I want to have something similar to what a lot of email clients have, where the app can work...

Python

DETERMINING WHICH HIERARCHY OF A DIMENSION IS SELECTED

by: Sara | last post by:

I am trying to use MDX to dynamically determine which hierarchy of the time dimension is selected. I have a calculated member which is using the last non-empty descendant of the . dimension, but...

Microsoft SQL Server

Determining string length in pixels

by: Simon Wigzell | last post by:

I am adapting a javascript pulldown menu system to my dynamic website generator - the arrays that hold the menu items information are read from a database and will be different for different users...

Javascript

Determining which groups are assigned to a folder

by: Garrett | last post by:

Need any help in determining which groups have been given security access to a folder. Searched DirectoryServices to no avail... Any Help?

C# / C Sharp

Determine client area available to MDI child forms

by: Lance | last post by:

I need to know the bounds of the client area of an MDI parent form that is available to MDI child forms. In other words, the area of the MDI parent's ClientRectangle that does not include docked...

Visual Basic .NET

SQL0954C -- Not enough storage is available in the application heap to process the statement.

by: Raj | last post by:

Hi all, I recieve this error message SQL0954C when i execute an SQL, it is failry complex ... i've seen more complex sql's running with out any error. We are on partitioned database with...

DB2 Database

Hi, can this be done? [determining size of specified browser window]

by: catmansa | last post by:

Is there anyway to determine the present pixel height & width size of a open browser window? :)

Javascript

2 QA consultants available immediately with us

by: mandarkraftware | last post by:

Hi All, We have the following consultants currently available. Consultant Name : Bandi Preferred location: Bay area, CA Summary: · Over Eight Years of Experience in Quality Assurance...

C / C++

News: .NET framework source code available soon...

by: Jon Skeet [C# MVP] | last post by:

I'm sure the net will be buzzing with this news fairly soon, but just in case anyone hasn't seen it yet: Microsoft are going to make the source code for the .NET framework (parts of it,...

C# / C Sharp

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

determining available area

Similar topics