Problem document height when document larger than screen

[Martin Molema]

Hello everyone,

I have a thumbnail gallery and want to create a popup in the center of
the screen. The popup should start at the point clicked and expand to
the center of the screen.

Problem is that "what is the center of the screen" when there is a
scrollbar. I probably should take into account the position of the
vertical scrollbar? Where do I find that property?

What I do now is obtain the document's outerheight and the point
clicked and try to figure out where to zoom / pan to. However:
document.body.clientHeight is always 40! If I use Firebug plugin in
Firefox, the body is reported as (e.g.) 1686. The document.outerHeight
is often around 860 (somewhere windows screen size), but nowhere can I
find the value 1686,


Code is below:

[code snippet]
viewWidth = window.innerWidth > document.body.clientWidth ?
window.innerWidth : document.body.clientWidth;
viewHeight = window.outerHeight > document.body.clientHeight ?
window.outerHeight : document.body.clientHeight;


if (aspectRatio < 1){
gZoomWidth = viewWidth / 2;
gZoomHeight = gZoomWidth * aspectRatio;
}
else{
gZoomHeight = viewHeight / 1.5;
gZoomWidth = gZoomHeight / aspectRatio;
}

gZoomPosX = viewWidth / 2 - gZoomWidth / 2;
gZoomPosY = viewHeight / 2 - gZoomHeight / 2;

img.width = 1;
img.height = 1;
img.src = getLargeImageSrc(thumb.src);

if (thumb){
gDiv.style.top = thumb.offsetParent.offsetTop + "px";
gDiv.style.left = thumb.offsetParent.offsetLeft + "px";
gDiv.style.height = 10 + "px";
gDiv.style.width = 10 + "px";

increaseSize();
}

[/code snippet]

Example at http://www.molema.org/subpages/fotos/showThumbnails.php?id=DIR19

Any help is welcome

Greets Martin

 

[Thomas 'PointedEars' Lahn]

I have a thumbnail gallery and want to create a popup in the center of
the screen. The popup should start at the point clicked and expand to
the center of the screen.

Problem is that "what is the center of the screen" when there is a
scrollbar.

Or a second screen to which a virtual desktop expands, or ...

I probably should take into account the position of the
vertical scrollbar?

Not at all. But you probably should take this into account:

Display resolution != desktop size != browser window size != viewport size.
[psf 3.7]

Where do I find that property?

It's .scrollTop, but you are not looking for that here.

What I do now is obtain the document's outerheight

Which is Netscape/Gecko-only, if I'm not mistaken.

and the point clicked and try to figure out where to zoom / pan to.
However: document.body.clientHeight is always 40!

Of course. The client height *of the `body' element* does not increase or
decrease just because the viewport size increases or decreases: there is
_not_ more or less content in the element then, but only the content
*display* may be cut off at the viewport borders.

If I use Firebug plugin in Firefox, the body is reported as (e.g.) 1686.
See?

The document.outerHeight is often around 860 (somewhere windows screen size),

Looks reasonable enough, given a desktop size of e.g. 1280 by 1024 pixels.

but nowhere can I find the value 1686,

That's too bad.

Code is below:

[code snippet]
viewWidth = window.innerWidth > document.body.clientWidth ?
window.innerWidth : document.body.clientWidth;
viewHeight = window.outerHeight > document.body.clientHeight ?
window.outerHeight : document.body.clientHeight;
[...]

Please don't.

Any help is welcome

RTFMs. They explain what each property value means in each DOM.
For example:

<https://developer.mozilla.org/en/Gecko_DOM_Reference>
<http://msdn.microsoft.com/en-us/library/ms533055(VS.85).aspx>


PointedEars

 

[dhtml]

Hello everyone,

I have a thumbnail gallery and want to create a popup in the center of
the screen. The popup should start at the point clicked and expand to
the center of the screen.

Problem is that "what is the center of the screen" when there is a
scrollbar. I probably should take into account the position of the
vertical scrollbar? Where do I find that property?

What I do now is obtain the document's outerheight and the point
clicked and try to figure out where to zoom / pan to. However:
document.body.clientHeight is always 40! If I use Firebug plugin in
Firefox, the body is reported as (e.g.) 1686. The document.outerHeight
is often around 860 (somewhere windows screen size), but nowhere can I
find the value 1686,

Are you sure you meant document.outerHeight, or did you mean
window.innerHeight?

Or did you mean jQuery outerHeight method, as in $(document).outerHeight()?

Garrett