Web APIs - a very interesting and rarely well explored territory. And yet, there's a large number of unique and very useful APIs that can help you to create tools for your projects.
For example, tracking size changes is key to creating dynamic, responsive experiences. This is where the Resize Observer API comes in.
In this article, we’ll build a measuring tool that displays the width and height of a resizable box in real-time. This is a project that demonstrates the power of the Resize Observer API and Browser APIs in general in a practical and interactive way.
What is the Resize Observer API?
The Resize Observer API is a browser feature that allows you to detect changes to the size of an element. Resize Observer works on individual elements. It works out-of-the-box, and can be a great addition to your toolset for building responsive design and dynamic UIs.
Here’s what makes it great:
- It’s lightweight and easy to use
- You can track changes in size for specific elements, not just the entire viewport
- It’s perfect for building responsive components or resizable widgets
What We’re Building
We’ll create a resizable box with dimensions displayed inside of it. As the user resizes the box, the displayed dimensions will update in real time.
Step 1: Setting Up the Project
First, let’s set up the basic structure for our project:
resize-tool/
├── index.html
├── styles.css
├── script.js
Step 2: The Markup
Here’s a simple layout for our app. The resizable box includes a text span to display its dimensions:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Measuring Tool with Resize Observer API</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div id="resizableBox" class="resizable">
<span id="dimensions">Width: 0px, Height: 0px</span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 3: Styling the App
We’ll add some styles to make the resizable box more visually appealing:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.container {
position: relative;
width: 80%;
height: 80%;
}
.resizable {
position: absolute;
width: 300px;
height: 200px;
border: 2px dashed #007bff;
background: rgba(0, 123, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
resize: both;
overflow: auto;
}
.resizable span {
background: white;
padding: 5px;
border-radius: 4px;
font-size: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
Step 4: Adding Real-Time Resize Tracking
Now let’s bring the project to life using the Resize Observer API:
const resizableBox = document.getElementById('resizableBox');
const dimensions = document.getElementById('dimensions');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
dimensions.textContent = `Width: ${Math.round(width)}px, Height: ${Math.round(height)}px`;
}
});
resizeObserver.observe(resizableBox);
Step 5: Testing the Tool
- Open the
index.htmlfile in your browser. - Drag the corners of the box to resize it.
- Watch as the dimensions update instantly!
How It Works
- The Resize Observer API is initialized to monitor size changes for the
resizableBoxelement. It triggers a callback whenever the size of the observed element changes. - The Resize Observer Entry provides updated dimensions through the
borderBoxSizeproperty. - The updated width and height values are extracted and displayed dynamically by modifying the text content of the
<span>element inside the resizable box.
Conclusion
In this tutorial, we built a fun and interactive measuring tool using the Resize Observer API. This project demonstrates how browser APIs can simplify complex tasks.
If you try this out or extend it further, feel free to share your creations in the comments!
Also, check out the CKEditor blog for articles around rich-text editors, and start your journey with CKEditor 5 by signing up for a free trial today!
Top comments (0)