asked on

Get Window Coordinates

I'm working with a DHTML layer that sits on top of the page - I want it to always stay about 200 px from the top and left of the screen, even when a user scrolls down. In other words, as a user scrolls through a page, that window needs to follow them. Also they may activate the window by clicking a link, at which point the window should display in front of them, no matter where they're scrolled to on the page.

I know I've seen such a thing before, but I can't figure out how to do it. Any suggestions/examples?

Thanks!
Dan

Pravin Asar

Look at the example,

This gets
1. Screen Resolution
2. Window Location
3. Window Size

And shows how to reposition an element at the center of page .

<html>
<head>
<title>Window and Screen Size Details</title>
</head>
<body onload="rePositionDiv()" onresize="rePositionDiv();">
<script language="javascript">
var wLeft = 0;
var wTop = 0;
var wWidth=800;
var wHeight=600;
var scrWidth=0;
var scrHeight=0;

var wndDetail = new GetWindowDetails();
alert ('Screen Resolution : ' + wndDet.sWidth + ' X ' + wndDet.sHeight);
alert ('Window Location : ' + wndDet.wLeft + ' , ' + wndDet.wTop);
alert ('Window Size : ' + wndDet.wWidth + ' X ' + wndDet.wHeight);

function GetWindowDetails () {
WindowSize();
GetWindowLocation();
GetScreenResolution();
this.wWidth = wWidth;
this.wHeight = wHeight;
this.sWidth = scrWidth;
this.sHeight = scrHeight;
this.wLeft = wLeft;
this.wTop = wTop;
return this;
}
// Get Window Size
function WindowSize()
{
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
wWidth = window.innerWidth;
wHeight = window.innerHeight;
}
else if( document.documentElement &&
(document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
wWidth = document.documentElement.clientWidth;
wHeight = document.documentElement.clientHeight;
}
else if( document.body &&
(document.body.clientWidth ||
document.body.clientHeight ) ) {
//IE 4 compatible
wWidth = document.body.clientWidth;
wHeight = document.body.clientHeight;
}
}

// Get Window Height
function GetWindowHeight () {
WindowSize();
return (wHeight-20);
}

// Get Window Width
function GetWindowWidth () {
WindowSize();
return (wWidth);
}

// Get Screen Resolution

function GetScreenResolution () {
scrWidth = window.screen.width;
scrHeight = window.screen.height;
}

// Get Window Location
function GetWindowLocation () {
if (!document.layers && document.all) {
      wLeft = window.screenLeft;
      wTop = window.screenTop;
}
else {
      wLeft = window.screenX;
      wTop = window.screenY;
}
}

function resizeDiv()
{
var wndDetail = new GetWindowDetails();
var newWidth=wndDetail.wWidth - 100;
if (newWidth>1000) newWidth=1000;
document.getElementById("divMainContent").style.width=newWidth;

}
function rePositionDiv()
{
var wndDetail = new GetWindowDetails();
var divObj = document.getElementById("divMainContent");
var newX= (parseInt (wndDetail.wWidth) - parseInt(divObj.style.width))/2;
divObj.style.left = parseInt(newX);
var newY= (parseInt (wndDetail.wHeight) - parseInt(divObj.style.height))/2;
divObj.style.top = parseInt(newY);

}
window.onresize=rePositionDiv;
</script>
</head>
<body>
<span id="divMainContent" style="border: 1px solid black; position: absolute; top: 10px; left: 100px; width: 50px; height: 100px;">DIV OBJECT</span>

</body>
</html>

ASKER CERTIFIED SOLUTION

Pravin Asar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dancablam

ASKER

Works like a true dream! Perfect! Thanks!

--Dan