1

While researching about above mention questions, I came up with solution which did not work in my case.

MutationObserver and Resize Observer

var observer = new MutationObserver(function (mutations) {
    $parent.find('.ListSliderWrapper').removeClass('binded');
    let carousel = new CarouselInit($parent.find('.ListSliderWrapper'));
});
observer.observe($parent.find('.ListSliderWrapper')[0], {
    attributes: true,
    attributeFilter: ['class']
});

The above mention code went into infinite loop.

function observeSize() {
    $parent.find('.ListSliderWrapper').removeClass('binded');
    let carousel = new CarouselInit($parent.find('.ListSliderWrapper'));
}

new ResizeObserver(observeSize).observe($('.ListSliderWrapper')[0])

This code works only on google chrome.

I am searching the way to track the width change of an element by class with cross browser compatibility.

Albert Einstein
  • 7,472
  • 8
  • 36
  • 71
  • In the first snippet you must check if the class is present first and remove it only then. The only cross-browser fallback would be periodic checking in setInterval. – wOxxOm Jun 21 '18 at 10:35
  • In first snippet, both class `.ListSliderWrapper` and `.binded` are there. Problem is that MutationObserver will track the change in class, here in this element I need to add new class and remove it frequently base on user interaction on that element. – Albert Einstein Jun 21 '18 at 10:38
  • Uhm, I probably suck at explaining but it's really obvious, see [this](https://stackoverflow.com/a/50916724). – wOxxOm Jun 21 '18 at 10:47

0 Answers0