Jump to content

Coordinates not getting displayed


rogerio
 Share

Recommended Posts

Why does this only display the coordinates that are above but not below or to the left or right?

<?xml  version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:w="urn:schemas-microsoft-com:office:word"xmlns="http://www.w3.org/TR/REC-html40"> <head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE5"><link rel='stylesheet' href='sample.css' type='text/css'> <script type="text/javascript">function show_coords(event){  x=event.clientX  y=event.clientY  document.getElementById('position').value="X: "+x+" Y: "+y;}</script><title></title></head><body onmousemove="show_coords(event)" id="show"><p>View coordinates in text box.</p><input type="text" style="position:absolute; left:100px; size:50px;" name="position" id="position"></body></html>

Edited by rogerio
Link to comment
Share on other sites

Because the body ends after the text box, it doesn't fill the entire screen, so the mousemove event doesn't fire once the mouse cursor is outside the body. But a better question would be why are you telling IE to emulate a 13 year old browser?

Link to comment
Share on other sites

Because the body ends after the text box, it doesn't fill the entire screen, so the mousemove event doesn't fire once the mouse cursor is outside the body. But a better question would be why are you telling IE to emulate a 13 year old browser?
Ok on the body ending, but it does not show the coorinates to the left either. Nothing specific on the "13 year old browser", the code was just convient; think it would be better to move 5.5 or 6 or 7????
Link to comment
Share on other sites

I don't see a reason to emulate a previous version at all, are you using code that only works in old versions? It doesn't track the mouse on the left because of the absolute position. Elements that are positioned absolutely are not included in the normal layout, so the body actually ends before the text box. If you use relative positioning it works fine. You can add a div to take up the entire body with a background color if you want to see how big the body is:

<body onmousemove="show_coords(event)" id="show"><div style="background-color: #CCFFFF; width: 100%; height: 100%;"><p>View coordinates in text box.</p><input type="text" style="position: absolute; left:100px; size:50px;" name="position" id="position"></div></body>

Link to comment
Share on other sites

I had picked up on the <div> and the absolute worked, but the "relative" is elusive. I changed to:

<input type="text" style="position:relative; size:50px;" id="position">

and I still get the same behaviour as with absolute with and without the <div>.

Link to comment
Share on other sites

There isn't any space on the left in that case to see it. If you add the left offset to move the thing to the right, you'll see that you can point to the left and it will pick up the coordinates. Without the offset it's positioned on the left of the body, so there isn't any space on the left to point at. There's a margin there, but that margin isn't considered part of the body either. If you want to use the full screen, add this CSS: html, body {width: 100%; height: 100%; margin: 0; padding: 0}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...