rogerio Posted July 27, 2012 Share Posted July 27, 2012 (edited) 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 July 27, 2012 by rogerio Link to comment Share on other sites More sharing options...
justsomeguy Posted July 27, 2012 Share Posted July 27, 2012 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 More sharing options...
rogerio Posted July 27, 2012 Author Share Posted July 27, 2012 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 More sharing options...
justsomeguy Posted July 27, 2012 Share Posted July 27, 2012 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 More sharing options...
rogerio Posted July 27, 2012 Author Share Posted July 27, 2012 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 More sharing options...
justsomeguy Posted July 27, 2012 Share Posted July 27, 2012 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 More sharing options...
rogerio Posted July 27, 2012 Author Share Posted July 27, 2012 thanks, that got things in control... Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now