DEV Community

alexpaper
alexpaper

Posted on

1 1

๐Ÿ“ Resize Observer API

Resize Observer interface reports changes to the dimensions of an HTML elements .

How to use

It is very simple to use and in some special cases, can be used as an javascript alternative to CSS @media query.

You need to create a new ResizeObserver instance

const observer = new ResizeObserver(entries =>{
    // console.log(entries[0]);
    ...
});
Enter fullscreen mode Exit fullscreen mode

then you need to *observe * the HTML element, in this case the main container

observer.observe(container);
Enter fullscreen mode Exit fullscreen mode

Now whenever the container size changes, the observer returns an object with the new width and hight values,
values that can be used to manipulate elements within the page.

In this video you can see a simple example

have a good day ๐Ÿ‘‹

Top comments (0)

Billboard image

Try REST API Generation for Snowflake

DevOps for Private APIs. Automate the building, securing, and documenting of internal/private REST APIs with built-in enterprise security on bare-metal, VMs, or containers.

  • Auto-generated live APIs mapped from Snowflake database schema
  • Interactive Swagger API documentation
  • Scripting engine to customize your API
  • Built-in role-based access control

Learn more

๐Ÿ‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityโ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple โ€œthank youโ€ goes a long wayโ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay