Created
May 5, 2020 09:05
-
-
Save fkohlgrueber/5dac626cf1fa4a14dd1442e63fbbff31 to your computer and use it in GitHub Desktop.
ResizeObserver example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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/[email protected]/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