jQuery Loop to continually look for a body class

Question

I am not very good with jQuery but what I want to achieve is a loop that will continually check the body tag for a certain class and will then preform an if statement when the class is attached to the body. My website has various fullscreen sections on my homepage and the class for the body will update as I scroll through the sections to reflect which section is currently on screen. I want to be able to keep checking the body tag until, for example, section 2 (class is "fp-viewing-2") is displayed at which stage I will preform some css animations.

if ($("body").hasClass("fp-viewing-2")){
  $("#sec3text1").removeClass("hidden");
  $("#sec3text1").addClass("animated fadeInLeft");
};

This is the general logic however this is only checked once when the page loads and I need it to continually check until body has the class "fp-viewing-2".

Thanks in advance.

I'd recommend you to use MutationObservers instead of a loop. You can "observe" the BODY element for `class` attribute changes and it will call a callback function where you can check if the element has that class. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver — arieljuod, Nov 30 '18 at 01:57

score 0 · Answer 1 · answered Dec 10 '18 at 11:49

When using fullPage.js you should take advantage of fullPage.js features to do so. Continuously checking the body classes is not the way to do it. Plus, it is quite expensive in performance terms.

You should be using fullPage.js callbacks like afterLoad or afterSlideLoads.

Check this example from the fullpage.js docs:

new fullpage('#fullpage', {
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function(origin, destination, direction){
        var loadedSection = this;

        //using index
        if(origin.index == 2){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(origin.anchor == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});

score -1 · Accepted Answer · answered Nov 30 '18 at 01:20

-1

It looks like you're looking for an interval, or a recursive timeout, which runs until the class is found. One option is:

const interval = setInterval(() => {
  if ($("body").hasClass("fp-viewing-2")){
    $("#sec3text1")
      .removeClass("hidden")
      .addClass("animated fadeInLeft");
    clearInterval(interval);
  }
}, 1000);

Note that you can chain addClass onto removeClass to reduce code.

The "1000" at the end there indicates how often the interval runs - 1000 means 1000 ms. (To make the interval trigger more frequently, reduce that number, and vice versa)

Note that if statement brackets { } should not have a semicolon at the end of the final }.

answered Nov 30 '18 at 01:20

CertainPerformance

356,069
52
309
320

Legend, thanks so much! What is the purpose of clearing the interval? – Andi Stevenson Nov 30 '18 at 01:54
If you don't clear it, then it'll continue running the check forever (and will keep trying to remove and add those classes every second, despite the fact that they've already been removed/added) – CertainPerformance Nov 30 '18 at 01:56
Although this answers the OP question, this is not really the proper way to solve his issue. Please see [my answer](https://stackoverflow.com/a/53705085/1081396) to do it the proper way, which is using fullPage.js callbacks. – Alvaro Dec 10 '18 at 11:46

score -1 · Answer 3 · answered Nov 30 '18 at 01:57

I can suggest you a concept. As far as I understand, the key to your function to act is having a needed tag displayed on screen. So first of all, I would set an event on scroll and check if the needed tag is on the screen or not. Here's the answer where you can see the function, which detects if element is on the screen: Check if element is visible after scrolling

So, logic is a s follows: 1) check the scroll, 2) put there function call to check whether your tag is on the visible screen. If yes - fire your action.

Here's the example of js function and scroll event handler:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

document.addEventListener('scroll', function (event) {
        //console.log('scroll event caught');
        var elInView=isScrolledIntoView($('.someSpecClass'));
         console.log("elInView="+elInView);
         if(elInView){
         alert("do your thing here, element is in view");

         }
}, true );

Here's a live demo for you. Hope it helps.

jQuery Loop to continually look for a body class

3 Answers3