Okay, I took a slight detour on this, so bear with me. I took some existing code I used for a project where I needed to see the screen info constantly as I was working on it, so I came up with an unobtrusive solution that would stay out of the way until I needed it. I merged that with @Kamil Kiełczewski's answer above. If you want to use it in a project you just need the JS portion of the snippet, which I recommend turning into a separate JS file.
(function () {
try {
function collapseExpand(getID, fadeOff = "") {
if (
document.getElementById(getID) &&
document.querySelector(`.${getID}`)
) {
let ele = document.querySelector(`.${getID}`);
let theID = document.getElementById(getID);
if (
ele.style.display === "none" ||
ele.style.display === undefined ||
ele.classList.contains("none")
) {
if (fadeOff !== "") {
ele.style.display = "block";
} else {
fadeIn(ele);
}
theID.classList.replace("roundAll", "roundTop");
theID.setAttribute("title", "Click to contract");
} else {
if (fadeOff !== "") {
ele.style.display = "none";
} else {
fadeOut(ele);
}
theID.classList.replace("roundTop", "roundAll");
theID.setAttribute("title", "Click to expand");
}
}
}
function setCollapseExpand(getID, state = "hidden") {
if (
document.getElementById(getID) &&
document.querySelector(`.${getID}`)
) {
let theID = document.getElementById(getID);
let theQS = document.querySelector(`.${getID}`);
theID.classList.add("expandO");
theID.classList.add("roundAll");
theQS.classList.add("expand-contract");
theID.setAttribute("title", "Click to contract");
if (state === "hidden") {
theID.classList.replace("roundTop", "roundAll");
document.querySelector(`.${getID}`).style.display = "none";
theID.setAttribute("title", "Click to expand");
}
theID.addEventListener("click", function (e) {
collapseExpand(e.target.id);
});
}
}
function fadeOut(_target) {
let el = _target;
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= 0.02) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
}
function fadeIn(_target, display) {
let el = _target;
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += 0.02) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
function sizes() {
const contentWidth =
[...document.body.children].reduce(
(a, el) => Math.max(a, el.getBoundingClientRect().right),
0
) - document.body.getBoundingClientRect().x;
document.querySelector(".windowWidth").innerHTML =
"windowWidth = " + document.documentElement.clientWidth.toFixed(0);
document.querySelector(".windowHeight").innerHTML =
"windowHeight = " + document.documentElement.clientHeight.toFixed(0);
document.querySelector(".pageWidth").innerHTML =
"pageWidth = " +
Math.min(document.body.scrollWidth, contentWidth).toFixed(0);
document.querySelector(".pageHeight").innerHTML =
"pageHeight = " + document.body.scrollHeight.toFixed(0);
document.querySelector(".screenWidth").innerHTML =
"screenWidth = " + window.screen.width.toFixed(0);
document.querySelector(".screenHeight").innerHTML =
"screenHeight = " + window.screen.height.toFixed(0);
document.querySelector(".pageX").innerHTML =
"pageX = " + document.body.getBoundingClientRect().x.toFixed(0);
document.querySelector(".pageY").innerHTML =
"pageY = " + document.body.getBoundingClientRect().y.toFixed(0);
document.querySelector(".screenX").innerHTML =
"screenX = " + -window.screenX.toFixed(0);
document.querySelector(".screenY").innerHTML =
"screenY = " +
(-window.screenY - (window.outerHeight - window.innerHeight)).toFixed(
0
);
}
window.onload = sizes;
window.onresize = sizes;
const font_widget_style = `
html { scroll-behavior: smooth;}/* smooth-scroll CSS */
:root {
--main-font: sans-serif;
--main-bdrs: 0.5rem;
--expando-dark: #aaa;
--expando-light: #ccc;
--expando-font: sans-serif;
--expando-dark-text: #eee;
--expando-light-text: #444;
--hidden-background: rgba(250, 250, 250, 0.95);
--hidden-background-border: 2px solid rgba(200, 200, 200, 0.95);
}
* {
box-sizing: border-box;
}
.expand-contract {
background: var(--hidden-background);
border-radius: 0 0 0.5rem 0.5rem;
border: var(--hidden-background-border);
padding: 0.25rem;
margin: 0 auto;
margin-bottom: 0.25rem;
width: calc(100vw - 25px);
font-family: sans-serif;
}
.expandO {
text-align: center;
width: 160px;
font-family: var(--main-font);
font-size: 0.8rem;
margin: 0 auto;
color: #555;
/* background: #eee; */
border: 1px solid #ccc;
padding: 0.25rem 0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
font-weight: bold;
text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.5);
cursor: pointer;
}
.roundTop {
border-radius: var(--main-bdrs) var(--main-bdrs) 0 0;
}
.roundAll {
border-radius: var(--main-bdrs);
margin-bottom: 0.2rem;
}
.no-select {
user-select: none;
/* -moz-user-select: none;
-webkit-user-select: none; */
}
.expando.roundTop,
.roundTop {
background: var(--expando-dark);
color: var(--expando-dark-text)
}
.expando.roundAll,
.roundAll {
background: var(--expando-light);
color: var(--expando-light-text)
}
aside.show-window-size-details {
opacity: 0.1;
width: 160px;
margin: 0 auto;
padding: 0.1rem;
font-size: 0.8rem;
font-family: sans-serif;
text-align: center;
transition: 0.5s opacity;
}
aside.show-window-size-details:hover {
opacity: 1;
transition: 1s opacity;
}
aside.show-window-size-details h3 {
margin: 2px;
font-size: 0.85rem;
font-family: sans-serif;
font-weight: normal;
text-shadow: 0.5px 0.5px #333;
text-align: center;
cursor: pointer;
}
div.window-size-properties {
font-family: sans-serif;
width: 160px;
margin: 0 auto;
font-size: 0.8rem;
}`;
const font_widget_style_tag = document.createElement("style");
font_widget_style_tag.innerHTML = font_widget_style;
document.head.appendChild(font_widget_style_tag);
let size_aside = document.createElement("aside");
size_aside.setAttribute("class", "show-window-size-details");
size_aside.innerHTML = `
<h3 title="click to expand/contract" id="window-size-properties">window size details</h3>
<div class="window-size-properties">
<div title="document.documentElement.clientWidth" class="windowWidth"></div>
<div title="document.documentElement.clientHeight" class="windowHeight"></div>
<div title="document.body.scrollWidth" class="pageWidth"></div>
<div title="document.body.scrollHeight" class="pageHeight"></div>
<div title="window.screen.width" class="screenWidth"></div>
<div title="window.screen.height" class="screenHeight"></div>
<div title="document.body.getBoundingClientRect().x" class="pageX"></div>
<div title="document.body.getBoundingClientRect().y" class="pageY"></div>
<div title="window.screenX" class="screenX"></div>
<div title="(-window.screenY - (window.outerHeight-window.innerHeight)" class="screenY"></div>
</div>`;
const _body = document.querySelector("body");
_body.insertAdjacentElement("beforeend", size_aside);
setCollapseExpand("window-size-properties");
} catch (e) {
console.error(e);
}
})();body {
font-family: sans-serif;
text-align: center;
}To see the widget, hover over the middle of the screen just below this sentence.