Resize Observer

By  on  

Creating websites that are reactive and responsive used to be considered advanced but responsiveness is a necessity for successful websites and apps. We've added media queries, matchMedia, and a host of other APIs to help developers make responsiveness easier and now we get a new one: ResizeObserver. With the Resize Observer API, we can watch for resizing on individual elements!

Using ResizeObserver

To listen for resize changes on elements, create a ResizeObserver instance and call observe, passing an element:

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    // Now do something with the resized element
    if (entry.contentRect.width < 1000) {
      // Stop making AJAX calls for content...
    }
  }
});
observer.observe(document.querySelector('div'));

An entry provides you a target element as well as its dimensions and positioning:

entry = {
  target: div, // The element passed to `observe`
  contentRect: {
  bottom: 88,
  height: 88,
  left: 0,
  right: 1043,
  top: 0,
  width: 1043,
  x: 0,
  y: 0
  }
}

Media queries and matchMedia provide an opportunity to adjust display via CSS but not functionality, which is where ResizeObserver fits in.

Years ago I created a hack for spying on elements using CSS, media queries, and :before, but it required polling via JavaScript to work properly. Having a legit, optimized JavaScript API to accomplish the same is refreshing and desperately needed!

Recent Features

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    Image Manipulation with PHP and the GD Library

    Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once. ...OK I'm rubbish when it comes to Photoshop.

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Discussion

  1. unleashit

    Nice helpful tidbit as usual. Do you know why they chose to add a brand new API over just supporting onresize on elements other than window? If you read the docs for onresize you can see that at one time some browsers supported it: https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!