Solved

Capture true position of mouse

Posted on 2007-03-29
6
229 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
What am I doing wrong with this Lightbox widget? 6 33
Problem to refer to value 8 45
add a 3rd selection to sum 7 25
If condition on Html with Asp 11 13
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

808 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