📏 Resize Handler Demo

Demonstrating data-on-resize functionality with ResizeObserver

Basic Resize Detection

Resize the boxes below to see real-time dimension updates:

Resizable Box 1

Width: px

Height: px

💡 Drag the resize handle in the bottom-right corner

Resizable Box 2

Width: px

Height: px

💡 Drag the resize handle in the bottom-right corner

Responsive Breakpoint Detection

This container changes its layout based on its own width (container queries simulation):

Responsive Container

Item 1
Item 2
Item 3
Item 4

Current layout:

💡 Drag the right edge to change container width

Throttling and Debouncing

Different timing strategies for performance optimization:

Throttle (50ms)

Updates:

💡 Drag corner to resize - updates every 50ms

Debounce (150ms)

Updates:

💡 Drag corner to resize - updates after 150ms pause

Throttle (500ms)

Updates:

💡 Drag corner to resize - updates every 500ms

Window vs Element Dimensions

Access both element and window dimensions for responsive design:

Dimension Reporter

Element Width: px

Element Height: px

Window Width: px

Window Height: px

Element vs Window: % of window width

💡 Drag corners to resize this container

Dynamic Content Addition

New elements automatically get resize detection:

Performance Information

🚀 Optimizations

  • Single shared ResizeObserver for all elements
  • WeakMap for memory-efficient element tracking
  • Automatic cleanup when elements are removed
  • Configurable throttling and debouncing
  • Rounded dimensions to avoid float precision issues

📊 Usage Patterns

  • ds_on_resize("code") - Default behavior
  • ds_on("resize", "code", throttle="50") - Throttle (50ms)
  • ds_on("resize", "code", debounce="150") - Debounce (150ms)
  • Variables: $el, width, height, windowWidth, windowHeight
  • Automatic execution on element creation
  • Works with dynamically added elements