Script to get mouse coordinates inside Div

[CoursesWeb]

Hi,
Here's a JavaScript script that can be used to get and show the mouse coordinates inside a Div, or image.


<div id="divid" style="width:250px; height:100px; background:#0809fe;"></div>
<br/><br/> Click to add the coordinates in this text field.<br/>
<input type="text" name="regcoords" id="regcoords" />
<div id="coords">Coords</div>

<script type="text/javascript"><!--
/*
Here add the ID of the HTML elements for which to show the mouse coords
Within quotes, separated by comma.
E.g.: ['imgid', 'divid'];
*/
var elmids = ['divid'];

var x, y = 0; // variables that will contain the coordinates

// Get X and Y position of the elm (from: www.vishalsays.wordpress.com)
function getXYpos(elm) {
x = elm.offsetLeft; // set x to elm’s offsetLeft
y = elm.offsetTop; // set y to elm’s offsetTop

elm = elm.offsetParent; // set elm to its offsetParent

//use while loop to check if elm is null
// if not then add current elm’s offsetLeft to x
//offsetTop to y and set elm to its offsetParent
while(elm != null) {
x = parseInt(x) + parseInt(elm.offsetLeft);
y = parseInt(y) + parseInt(elm.offsetTop);
elm = elm.offsetParent;
}

// returns an object with "xp" (Left), "=yp" (Top) position
return {'xp':x, 'yp':y};
}

// Get X, Y coords, and displays Mouse coordinates
function getCoords(e) {
// www.coursesweb.net/
var xy_pos = getXYpos(this);

// if IE
if(navigator.appVersion.indexOf("MSIE") != -1) {
// in IE scrolling page affects mouse coordinates into an element
// This gets the page element that will be used to add scrolling value to correct mouse coords
var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;

x = event.clientX + standardBody.scrollLeft;
y = event.clientY + standardBody.scrollTop;
}
else {
x = e.pageX;
y = e.pageY;
}

x = x - xy_pos['xp'];
y = y - xy_pos['yp'];

// displays x and y coords in the #coords element
document.getElementById('coords').innerHTML = 'X= '+ x+ ' ,Y= ' +y;
}

// register onmousemove, and onclick the each element with ID stored in elmids
for(var i=0; i<elmids.length; i++) {
if(document.getElementById(elmids[i])) {
// calls the getCoords() function when mousemove
document.getElementById(elmids[i]).onmousemove = getCoords;

// execute a function when click
document.getElementById(elmids[i]).onclick = function() {
document.getElementById('regcoords').value = x+ ' , ' +y;
};
}
}
--></script>

[jscheuer1]

The code looks interesting and I'll assume it's serviceable. But:


<!--

and:


-->

inside a script or style block are no longer wise. The browser is allowed to ignore anything after <!--. Even when these were a good idea to avoid problems with what are now extinct browsers, the closing --> tag should be preceded by a javascript comment token:


// -->

and therefore be on a separate line from the the closing </script> tag.

In HTML 5 nothing other than javascript need be inside script tags. In XHTML it's often required for validation to use not character data comments:


<script type="text/javascript">
/* <![CDATA[ */
code goes here
/* ]]> */
</script>

Generally speaking though, javascript should be external. When one does that, none of these tags are required, nor do they perform any purpose. And validation of script code by an HTML validator is no longer an issue.


It's also unwise to use x or y as variables in the global scope. If this script is used on the same page with another that does the same thing, there will probably be problems.

Further, other than perhaps one public function to return the values to other scripts, none of this really needs any global exposure. With less global exposure, it would be much less likely to conflict with any other script(s) that might be on a given page with it.

I could go on, like about the wisdom of browser sniffing vs feature testing and/or allowing other browsers in when it won't hurt them, etc., but I'll leave it at this for now.

[CoursesWeb]

Hi
Thank you for your answer and indications. I learned something that I'll apply in next scripts.