0

I would like to check if a class is added on an Element during the scroll and launch another function, just once, until the class is added to the next element.

here my first function :

function onScreen() {

    $('article').each(function() {

        var thisTop = $(this).offset().top - $(window).scrollTop();
        var middleScreen = $(window).height() / 2;

        if (thisTop < middleScreen && (thisTop + $(this).height()) > middleScreen) {
            $(this).addClass('visible');
        } else {
            $(this).removeClass('visible');
        }
    });
}

// launch
$(window).on('load scroll', onScreen);

My seconde function : I would like to launch just once if the visible class is added to another article.

function textChange() {

    var v = $('article.visible');
    var el = $('.el', v);
    var text = $(el).html();
    $('.titre').html(text);

}

$(window).on('load scroll', textChange);

note : It's important to me to keep two separate function. My issue is the scroll function get call textChange() each pixel I scroll on the page. Strangly, the onScreen() function add the visible class just once until the next article gonna be visible.

Thanks for yours suggestions.

BrownBe
  • 977
  • 3
  • 11
  • 23
  • why don't you call your `textChange` after `$(this).addClass('visible');` ? – Max Koretskyi Sep 28 '16 at 09:56
  • Because I would like to separate the `onScreen()` function end the edit function. Anyway, the problem still the same. – BrownBe Sep 28 '16 at 09:59
  • I assume that you're going to have on the page only one visible article at at time? – Max Koretskyi Sep 28 '16 at 10:06
  • No I have a list of `article` element. That's the problem. The flag system gonna work for just one element. – BrownBe Sep 28 '16 at 10:08
  • So few articles from the list are going to be visible at a time? – Max Koretskyi Sep 28 '16 at 10:09
  • Yes, it's like an article was an img. But just one by one can get the class visible. – BrownBe Sep 28 '16 at 10:11
  • See [jquery run once .one() in viewport](http://stackoverflow.com/questions/39709512/jquery-run-once-one-in-viewport) , [jQuery trigger when 2/3s of div are in viewport](http://stackoverflow.com/questions/29140800/jquery-trigger-when-2-3s-of-div-are-in-viewport) – guest271314 Sep 28 '16 at 10:15
  • @BrownBe, I don't understand. How many articles can have `visible` class in a particular moment in time? – Max Koretskyi Sep 28 '16 at 10:22
  • @guest271314, it'll will run the callback just once, but the OP wants to run it again when the next article becomes visible – Max Koretskyi Sep 28 '16 at 10:23
  • @Maximus Yes, see duplicate Question. The first link at comment can also be adapted to meet requirement by adding a callback to be fired when next element is in viewport. – guest271314 Sep 28 '16 at 10:25
  • @Maximus I have a list of article (maybe 10). One article get the visible class when it exceeds 50% of the window.height and lose the class when his bottom exceeds 50% of the window.height . So Just one article per one is visible at time. – BrownBe Sep 28 '16 at 10:30
  • @BrownBe, you can then save the article to some variable and check if `var v = $('article.visible');` returned the same article, if not, apply your logic – Max Koretskyi Sep 28 '16 at 10:33

1 Answers1

0

Introduce a global variable that tells you if the function has been executed or not:

var textChanged = false;

In your textChange() function set it to true when the function was called the first time:

function textChange() {
    if(!textChanged){
       textChanged = true;
       var v = $('article.visible');
       var el = $('.el', v);
       var text = $(el).html();
       $('.titre').html(text);
    }
}

EDIT: Alternatively you can do the check before the function gets called:

if (thisTop < middleScreen && (thisTop + $(this).height()) > middleScreen) {
    $(this).addClass('visible');
    if(!textChanged){
       textChange();
    }
} else {
    $(this).removeClass('visible');
}
Marcel Dieterle
  • 335
  • 2
  • 6
  • The problem with the flag solution is `textChange()` gonna be blocked definitly. I would like the function block **until** the next article get the `visible` class. – BrownBe Sep 28 '16 at 09:57