onlyforbopi
9/22/2018 - 7:00 AM

JS.Events.PageClientScreenCoordSystem

JS.Events.PageClientScreenCoordSystem

style.css
content_copyfile_download
body{
  height:4000px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
}


table{
  position:fixed;
  width:100%;
  padding:10px 20px;
  background:#eee;
  border-spacing:5px 0; 
}
table td{
  vertical-align:bottom;
  border:1px dashed #ddd;
  padding:3px 10px;
}
table tr:first-child{
  background:#ddd;
}
script.js
content_copyfile_download


var m = ['client','page','screen']; // mods
$(document).mousemove(function(e){
  for(var i=0; i<3; i++){
    $('#'+m[i]).text((e[m[i]+'X'])+' '+ (e[m[i]+'Y']));
  }
  $('#scrollTop').text(
    $('html, body').scrollTop()
  );
});
js-events-pageclientscreencoordsystem.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Events.PageClientScreenCoordSystem

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>client - page - screen</title>
</head>
<body>
    <table>
      <tr>
        <td>Mouse position inside:</td>
        <td>X &nbsp;&nbsp;&nbsp; Y</td>
      </tr>
      <tr>
        <td>- client:</td>
        <td id="client"></td>
        <td>Client Viewport</td>
      </tr>
      <tr>
        <td>- page:</td>
        <td id="page"></td>
        <td>Document Page (scroll down to see the difference)</td>
      </tr>
      <tr>
        <td>(scrollTop:</td>
        <td id="scrollTop"></td>
        <td>Scroll top [pageY-clientY] )</td>
      </tr> 
      <tr>
        <td>- screen:</td>
        <td id="screen"></td>
        <td>Screen</td>
      </tr>
    </table>
</body>
</html>