-3

I just need small jquery help. So we would like to change the value of text on the left element .. So the number (1) should be changed to number (2) once user scroll to 2nd slide.

The body class changes to once you scroll: fp-viewing-1

Here video of the website: https://drive.google.com/file/d/10OcUoyvh1Xr3pWmxqzdR67wI8IlkPsNF/view?usp=sharing

Here is what I tried:

<script>
$(document).ready(function() {
if ($('body').attr("class") == "fp-viewing-1") {
         $('#count').addClass('something');
  }
 });
</script>

Once the class is added I was thinking to change the html value with css..

 content: "";
Goran Ramljak
  • 35
  • 1
  • 5
  • What you want is an observer on the `class` attribute. That's all about mutation observers... See (1) https://stackoverflow.com/a/41425087/3748178 (2) https://devdocs.io/dom/mutationobserver - watch out for browser support and (3) https://devdocs.io/dom/element/classlist – Salathiel Genese Jan 16 '20 at 11:06
  • What library are you using for the scrolling? I would expect it to raise an event you can listen for when a slide changes. Listening for DOM changes would be a rather hacky workaround. – Rory McCrossan Jan 16 '20 at 11:19
  • Does this answer your question? [JavaScript: Listen for attribute change?](https://stackoverflow.com/questions/41424989/javascript-listen-for-attribute-change) – Albert Logic Einstein Mar 15 '22 at 02:39

1 Answers1

0
// you can use two Intervals to detect as there is no event for class change in Jquery  
$(document).ready(function () {
        startProcess();
    });
    function startProcess() {
        var checkExist1 = setInterval(function () {
            if ($('body').hasClass("fp-viewing-1")) {
                clearInterval(checkExist1);
                alert("1 detected")
                var checkExist0 = setInterval(function () {
                    if ($('body').hasClass("fp-viewing-0")) {
                        clearInterval(checkExist0);
                        startProcess();
                        alert("0 detected")
                    }
                }, 100);
            }
        }, 100);
    }
Rajesh
  • 24
  • 2
  • Instead of Intervals, We Could Use [Mutation Observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe). Which Is a more suitable, reliable & efficient way. – Albert Logic Einstein Mar 15 '22 at 02:39