marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

Get reference to element when change #299

Closed mouthbow closed 3 years ago

mouthbow commented 3 years ago

This library works great but in the examples provided and #id is always used. In my case y use a .class as selector to attach function and works good but i need a reference to the object who was resized. How I can do that?

new ResizeSensor(jQuery('.myClassName'), function (resizedElement) { // console.log('content dimension changed. Element -->' + $(resizedElement).attr('id')); });

Many thanks in advance

mouthbow commented 3 years ago

I answer myself. I've modified ResizeSensor.js

line 67: * @returns {Object} {width, height, element}

and this function to include the element on return.

function getElementSize(element) { if (!element.getBoundingClientRect) { return { width: element.offsetWidth, height: element.offsetHeight, elem: element } }

    var rect = element.getBoundingClientRect();
    return {
        width: Math.round(rect.width),
        height: Math.round(rect.height),
        elem: element
    }
}

And my ResizeSensor is like this:

new ResizeSensor(jQuery('.myClassName'), function (resizedElement) { console.log('content dimension changed. Element -->' + $(lastelement.elem).attr('id')); });

Works like a charm