Skip to content

Instantly share code, notes, and snippets.

@fkohlgrueber

fkohlgrueber/index.html

Created May 5, 2020 09:05
Show Gist options
  • Save fkohlgrueber/5dac626cf1fa4a14dd1442e63fbbff31 to your computer and use it in GitHub Desktop.
Save fkohlgrueber/5dac626cf1fa4a14dd1442e63fbbff31 to your computer and use it in GitHub Desktop.
Download ZIP
ResizeObserver example
Raw
index.html
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu+Mono" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.207/distr/fira_code.css">
<style>
textarea {
font-family: Fira Code, monospace;
font-size: 12pt;
}
#measure {
position: absolute;
top: -10000px;
left: -10000px;
font-family: Fira Code, monospace;
font-size: 12pt;
}
</style>
</head>
<body>
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
Height: <output id="dims">0</output><br>
<textarea id="textbox">Resize me</textarea><br>
<span id="measure">X</span>
</body>
<script>
function outputsize() {
let measured = document.getElementById("measure").getBoundingClientRect();
let tb_width = textbox.offsetWidth - 4;
let tb_height = textbox.offsetHeight - 4;
width.value = `${tb_width} px, ${Math.floor(tb_width/measured.width)} cols`;
height.value = `${tb_height} px, ${Math.floor(tb_height/measured.height)} rows`;
dims.value = `${measured.width}, ${measured.height}`
}
outputsize()
function observer_2(){
let measured = measure.getBoundingClientRect();
console.log(`new dimensions: ${measured.width}, ${measured.height}`)
}
new ResizeObserver(outputsize).observe(textbox)
new ResizeObserver(observer_2).observe(measure)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment