Mouse Coordinates

by Noreh AD

HTML

<div id="coordinates">
    <table>
        <tr>
            <td>screen</td>
            <td>:</td>
            <td id="screen"></td>
        </tr>
        <tr>
            <td>client (viewport)</td>
            <td>:</td>
            <td id="client"></td>
        </tr>
        <tr>
            <td>page (document)</td>
            <td>:</td>
            <td id="page"></td>
        </tr>
        <tr>
            <td>layer</td>
            <td>:</td>
            <td id="layer"></td>
        </tr>
        <tr>
            <td>offset (target)</td>
            <td>:</td>
            <td id="offset"></td>
        </tr>
    </table>
</div>

<section>
    <h1>Web Browser</h1>
    <p>A web browser (commonly referred to as a browser) is a software application for retrieving, presenting and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) that may be a web page, image, video or other piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources.</p>
    <p>Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems.</p>
    <p>The most popular web browsers are Chrome, Edge (preceded by Internet Explorer), Safari, Opera and Firefox.</p>
</section>

<section>
    <h2>History</h2>
    <p>The first web browser was invented in 1990 by Sir Tim Berners-Lee. Berners-Lee is the director of the World Wide Web Consortium (W3C), which oversees the Web's continued development, and is also the founder of the World Wide Web Foundation. His browser was called WorldWideWeb and later renamed Nexus, and ran on NeXT Computers. Berners-Lee recruited Nicola Pellow, a math student intern working at CERN, to write the Line Mode Browser a cross-platform web browser that displayed web-pages on dumb terminals and was released in 1991.</p>
  ...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}
body {
  font-family: sans-serif;
  box-sizing: border-box;
  background-color: hsl(0, 0%, 90%);
  font-size: 15px;
}
section {
  background-color: hsl(0, 0%, 98%);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  padding: 20px;
  padding-right: 20%;
  margin: 20px;
}
h1 {
  font-size: 2em;
  font-weight: bold;
  background-color: hsla(0, 100%, 50%, .1);
}
p {
  margin: 1em 0;
  background-color: hsla(120, 100%, 50%, .1);
}
h2 {
  font-size: 1.6em;
  font-weight: bold;
  background-color: hsla(240, 100%, 50%, .1);
}
#coordinates {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 300px;
  background-color: rgba(255,255,255,.9);
  box-shadow: 0 1px 5px rgba(0,0,0,.5);
  padding: 15px;
}
#coordinates td:first-child {
  padding-right: 5px;
}

JavaScript

var client = document.getElementById("client");
var offset = document.getElementById("offset");
var page   = document.getElementById("page");
var screen = document.getElementById("screen");
var layer  = document.getElementById("layer");

window.addEventListener("mousemove", function (e) {
  client.innerText = e.clientX + " x " + e.clientY;
  offset.innerText = e.offsetX + " x " + e.offsetY;
  page.innerText   = e.pageX   + " x " + e.pageY;
  screen.innerText = e.screenX + " x " + e.screenY;
  layer.innerText  = e.layerX  + " x " + e.layerY;
});