Getting Center Coordinates of the Window Regardless of scroll

[mrengler2]

I have a web page written in asp.net/c# which can be fairly long, so
users scroll down. When they click a button, an asp created control is
displayed to the user, and the coordinates are set via javascript. I
currently use (document.body.clientHeight - offset) / 2 (and
window.outerWidth for firefox) to display the control vertically
centered. However, this doesn't work when the user scrolls down.

When the user scrolls down, those coordinates point towards the top,
which was the height of the window. I need to get the coordinates of
the vertical center of the screen regardless of how far the user
scrolls so that they always see this control in the center of the
screen. How can I do this?

MSIE 6 and 7 are my primary concern, and firefox is a less important
concern.

 

[SAM]

(e-mail address removed) a écrit :

I have a web page written in asp.net/c# which can be fairly long, so
users scroll down. When they click a button, an asp created control is
displayed to the user, and the coordinates are set via javascript. I
currently use (document.body.clientHeight - offset) / 2 (and
window.outerWidth for firefox) to display the control vertically
centered. However, this doesn't work when the user scrolls down.

When the user scrolls down, those coordinates point towards the top,
which was the height of the window. I need to get the coordinates of
the vertical center of the screen regardless of how far the user
scrolls so that they always see this control in the center of the
screen. How can I do this?

isn't it a specific CSS problem, where asp or JS have nothing to do ?

<div id="control"
style="position:fixed;top:50%;left:50%;border:1px solid;padding:0">
<p style="margin:0;padding:6px;text-align:center">
here my asp controller<br>
what I don't know that could be client-side
</p>
</div>
<script type="text/javascript">
/* and because we are on a JavaScript ng, some code not very useful */
var C = document.getElementById('control');
var H = C.getElementsByTagName('P')[0];
var W = H.offsetWidth;
H = H.offsetHeight;
C.style.marginTop = -(H/2)+'px';
C.style.height = (+H+10)+'px';
C.style.marginLeft = -(W/2)+'px';

MSIE 6 and 7 are my primary concern, and firefox is a less important
concern.

tested and you'll be glad to know that works in my IE Mac
(Fx 2, Safari 2, ...)

 

[Thomas 'PointedEars' Lahn]

I have a web page written in asp.net/c# which can be fairly long, so
users scroll down. When they click a button, an asp created control is
displayed to the user, and the coordinates are set via javascript. I
currently use (document.body.clientHeight - offset) / 2 (and
window.outerWidth for firefox)

Using window.outerWidth for Firefox makes little sense here. You have to
consider toolbars and panes at the bottom of the window chrome. *In Quirks
Mode*, Gecko's document.body.clientHeight value works like MSHTML's value in
Quirks Mode.

to display the control vertically centered.

Why, you could simply center the control with CSS:

control.style.textAlign = "center";

or

control.style.marginLeft = "auto";
control.style.marginRight = "auto";

depending on the computed `display' property value of your control.

However, this doesn't work when the user scrolls down.

When the user scrolls down, those coordinates point towards the top,
which was the height of the window. I need to get the coordinates of
the vertical center of the screen regardless of how far the user
scrolls so that they always see this control in the center of the
screen. How can I do this?

Using the (vertical) center of *a* screen for rendering an item in the
viewport is a recipe for disaster. You have to consider toolbars and
virtual desktops to begin with.

control.style.position = "fixed";
control.style.left = center.x + "px";
control.style.top = center.y + "px";

should suffice. This is a quick hack tested to work in Fx 2.0.0.12 and IE
7.0.5730.11 on Windows XP SP 2:

if (o) document.body.removeChild(o);
var o = document.createElement("div");
var t = document.createTextNode("foo");
o.appendChild(t);
o.style.position = "fixed";
o.style.border = "1px solid red";
o.style.backgroundColor = "white";
o.style.color = "black";
document.body.appendChild(o);
o.style.left = (document.documentElement.clientWidth / 2
- o.offsetWidth / 2) + "px";
void (o.style.top = (document.documentElement.clientHeight / 2
- o.offsetHeight / 2) + "px");

Requires both Gecko and MSHTML to render in Standards Compliance Mode.

(The `void' operation is only there to prevent IE from displaying the
expression result as this code was first tested with Firebug in Fx 2 and
then tested as a bookmarklet in IE 7, using Firebug's Copy feature.)

You should add the usual feature tests and associated fallbacks.

MSIE 6 and 7 are my primary concern, [...]

You would have to use one of the available position:fixed workarounds for
the former then. Google is your friend. [psf 6.1]


PointedEars

 

[SAM]

Thomas 'PointedEars' Lahn a écrit :

Why, you could simply center the control with CSS:

control.style.textAlign = "center";

isn't it horizontally centered ?