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
    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...

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • By
    iPad Detection Using JavaScript or PHP

    The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's...

  • By
    MooTools TextOverlap Plugin

    Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...

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!