Hi, @anthonysalamin I had now time to look into MutationObserver and I have to thank you to point me in the right direction. It took me almost 2 days (I know 
) to get it to work. Lots of reading, trial-fails in DevTools but finally I’m there. I would like to share my code as an example if someone will need it.
Basic Idea was to have slider text shifted out over the slide. In the first place I was able to HACK it with CSS it works fine but it wasn’t a clean job. More importantly, I had a bad time with responsiveness, but I make It. So yesterday I sat in front of the computer and start “observing” what a MutationObserver can do for me. It’s a great tool I have to say now.
STRUCTURE
I have div that contain heading and slider. This div is set to relative to be able to set my heading in absolute position inside this div. Inside of each slide is an image and heading(can be text element).
OBSERVER
I would not go to detail as there are lots of resources to read about what and how.
- first I have to grab the slider mask, as it contains all slides and element outside the slide where slide text will be placed.
const slideHeaderOut = document.querySelector("#slide-text");
const slider = document.querySelector(".fds-top-slider__mask");
- then I have set what I want to observe. In this case, I need to check for changes a
subtree of main element [mask], I need to check for attributes but only for class and aria-hidden
const observerOptions = {
subtree: true,
attributes: true,
attributeFilter: ["class", "aria-hidden"],
};
- create a new instance of
MutationObserver and add a function that will process data the way I need. Here I will place comments inside the code.
Here I have choose slides instead mutations for better understanding
// setting a new instance of observer and set name for passed arguments to `slides`
const slideObserver = new MutationObserver(function(slides) {
// loop to go over the each element in slides
slides.forEach(function(slide) {
// Observer specific condition
if (slide.type == "attributes") {
// NOW most important is this condition
// check if element has specific `class` as there are also arrows and I need only slides
// AND check that `aria-hidden` is not present attribute on this element
if (slide.target.classList.contains("w-slide") && !slide.target.hasAttribute('aria-hidden')) {
// get text from slider
const sliderText = slide.target.innerText;
// place this text into element outside of slider
slideHeaderOut.innerText = sliderText
} else {
// whatever yo need to do
console.log('aria-hidden is true')
}
}
});
});
- finally start observing
slideObserver.observe(slider, observerOptions);
Here is a full code without any comments
const slideHeaderOut = document.querySelector("#slide-text");
const slider = document.querySelector(".fds-top-slider__mask");
const observerOptions = {
subtree: true,
attributes: true,
attributeFilter: ["class", "aria-hidden"],
};
const slideObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type == "attributes") {
if (
mutation.target.classList.contains("w-slide") &&
!mutation.target.hasAttribute("aria-hidden")
) {
const sliderText = mutation.target.innerText;
slideHeaderOut.innerText = sliderText;
} else {
// whatewer you need
console.log("aria-hidden is true");
}
}
});
});
slideObserver.observe(slider, observerOptions);
So here we go. I still have to learn more to get understanding the whole power of MutationObserver but I hope that this simple example will find someone helpful.
And If there will be an idea how this code can be improved I’m open to any suggestions.
Happy no-coding
Not luck there either. Thank you for your offer I will gladly use your help if you will have time.
