Solved

Capture true position of mouse

Posted on 2007-03-29
6
230 Views
Last Modified: 2011-10-03
How do you capture the TRUE position of the mouse in an html document with javascript? I tried using event.y for the Y coordinate, but the value doesn't increase when you scroll down the page. Thanks.
0
Comment
Question by:rbichon
  • 2
  • 2
  • 2
6 Comments
 
LVL 8

Expert Comment

by:RozanaZ
ID: 18817864
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 18817869
you need to add document.scrollOffsetX document.scrollOffsetY to  mouse co-ordinates to
get it's position from top-left of the page.
0
 
LVL 1

Author Comment

by:rbichon
ID: 18818366
document.scrollOffsetY comes up undefined.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Author Comment

by:rbichon
ID: 18818650
How do I get the height of the viewable window?
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 18818775
0
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 250 total points
ID: 18822860
<html>
<head>
<title>Window and Screen Size Details</title>
</head>
<body onscroll="reLocateDiv();">
<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);

}

function reLocateDiv () {
   var wndDetail = new GetWindowDetails();
   var divObj = document.getElementById("divMainContent");
   var newY= parseInt(orgPosY) +  parseInt (window.document.body.scrollTop);
   var newX= parseInt(orgPosX) +  parseInt (window.document.body.scrollLeft);
   window.status = newY + ' , ' + window.document.body.scrollTop;
   divObj.style.top =  parseInt(newY);
   divObj.style.left = parseInt(newX);
}
var divObj  = document.getElementById("divMainContent");
var orgPosY = 10;
var orgPosX = 10;
//window.onresize=rePositionDiv;
</script>
</head>
<body>
<span id="divMainContent" style="border: 1px solid black; position: absolute; top: 10px; left: 10px; width: 50px; height: 100px;">DIV OBJECT</span>
<div style="height: 1000px; width: 1000px; ">DIV</div>


</body>
</html>
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question