Skip to content

Commit b3a3e8d

Browse files
further example updates to make them more cross browser compatible and interesting
1 parent 0c9009d commit b3a3e8d

File tree

2 files changed

+43
-6
lines changed

2 files changed

+43
-6
lines changed

resize-observer/resize-observer-border-radius.html

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,13 @@
2828
<script>
2929
const resizeObserver = new ResizeObserver(entries => {
3030
for (let entry of entries) {
31-
entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
32-
(entry.contentBoxSize.blockSize/10)) + 'px';
31+
if(entry.contentBoxSize) {
32+
entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
33+
(entry.contentBoxSize.blockSize/10)) + 'px';
34+
} else {
35+
entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) +
36+
(entry.contentRect.height/10)) + 'px';
37+
}
3338
}
3439
});
3540

resize-observer/resize-observer-text.html

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
align-items: center;
1818
}
1919

20-
div {
20+
body > div {
2121
background-color: #eee;
2222
border: 1px solid #ccc;
2323
padding: 20px;
@@ -32,26 +32,58 @@
3232
p {
3333
line-height: 1.5;
3434
}
35+
36+
form {
37+
width: 100%;
38+
}
39+
40+
form > div {
41+
display: flex;
42+
}
43+
44+
form label {
45+
flex: 2;
46+
}
47+
48+
form input {
49+
flex: 3;
50+
}
3551
</style>
3652
</head>
3753
<body>
3854
<div>
3955
<h1>So what happened?</h1>
4056
<p>And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it! Ow, my spirit! I don't want to be rescued. You guys aren't Santa! You're not even robots. I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I' have to pay 'them'!</p>
57+
<form>
58+
<div><label>Adjust width:</label><input type="range" value="600" min="300" max="1300"></div>
59+
</form>
4160
</div>
4261
<script>
4362
if(ResizeObserver) {
4463
const h1Elem = document.querySelector('h1');
4564
const pElem = document.querySelector('p');
65+
const divElem = document.querySelector('body > div');
66+
const slider = document.querySelector('input');
67+
68+
divElem.style.width = '600px';
69+
70+
slider.addEventListener('input', () => {
71+
divElem.style.width = slider.value + 'px';
72+
})
4673

4774
const resizeObserver = new ResizeObserver(entries => {
4875
for (let entry of entries) {
49-
h1Elem.style.fontSize = Math.max(2, entry.contentBoxSize.inlineSize/200) + 'rem';
50-
pElem.style.fontSize = Math.max(1.2, entry.contentBoxSize.inlineSize/600) + 'rem';
76+
if(entry.contentBoxSize) {
77+
h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
78+
pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
79+
} else {
80+
h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
81+
pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
82+
}
5183
}
5284
});
5385

54-
resizeObserver.observe(document.querySelector('div'));
86+
resizeObserver.observe(divElem);
5587
}
5688
</script>
5789
</body>

0 commit comments

Comments
 (0)