Skip to content

Instantly share code, notes, and snippets.

@djryanash

djryanash/index.css

Created July 25, 2024 02:28
Show Gist options
  • Save djryanash/d023bcfb5c2334f6bf20fbaeaa0a0748 to your computer and use it in GitHub Desktop.
Save djryanash/d023bcfb5c2334f6bf20fbaeaa0a0748 to your computer and use it in GitHub Desktop.
Download ZIP
Listen for browser window size updates.
Raw
index.css
#float-div {
padding: 1px;
width: 140px;
height: 50px;
background-color: blue;
border-radius: 7%;
opacity: 50%;
}
p.dimensions {
padding-left: 8px;
text-align: left;
line-height: 0.05;
font-family: 'Courier New', Courier, monospace;
color: white;
}
Raw
index.html
<html>
<body>
<div id="float-div">
<p class="dimensions" id="width">width: 865</p>
<p class="dimensions" id="height">height: 1440</p>
</div>
</body>
</html>
Raw
index.js
window.addEventListener("resize", printSize)
function printSize() {
const width = window.outerWidth
const height = window.outerHeight
const p_dimensions = document.querySelectorAll("p.dimensions")
p_dimensions[0].textContent = ("width: " + width)
p_dimensions[1].textContent = ("height: " + height)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment