Javascript Question posted in
A very good W3school tutorial can be found here.

Return not working in IF statement in Javascript with DIVI

Basically i’m trying to make an animation start when in view of the user
so far i had a success but now that i’m trying to make things simplier my if is not catching the return of my function, return console.log(); works fine but when i try to return a value the if just ignores it. returning always false as a result.

NOTE: I’m a junior dev using DIVI as a framework

Global JS!

<script>
  //Getting element and window parameters
  var $window = $(window);
  function check_if_in_view(el) { //Da finire
    var $element = $(el);
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);
    $(el).each(function() {
      var element_height = $(this).outerHeight();
      var element_top_position = $(this).offset().top;
      var element_bottom_position = (element_top_position + element_height);
      console.log($(this).attr('id'));
      //check to see if this current container is within viewport
      if ((element_bottom_position >= window_top_position) &&
          (element_top_position <= window_bottom_position)) {
        console.log('true');
        return true;
      } else {
        console.log('false');
        return false;
      }
    });
  };
</script>

Page-specific JS!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
  $('.fadeInLeft').css({'right' : '700px', 'opacity' : '0'});
  $('.fadeInRight').css({'left' : '700px', 'opacity' : '0'});

  function animateFadeLeft(el) {
    $(el).each(function() {
      if(check_if_in_view($(this))) {
        console.log('sono dentro')
        $(this).animate({right: '0px', opacity : '1'}, 1200);
      }
    });
  }

  $(window).on('DOMContentLoaded load resize scroll', function(){
    animateFadeLeft('.fadeInLeft');
    animateFadeLeft('.fadeInRight'); //To add
  });
</script>

I’m really sorry about the formatting of it but DIVI really sucks when formatting things since you have like a 2 inch code bar where to write it so it always messes up

(using divi because of the business where i’m learning for school)

I tried a lot actually but right now my mind is kinda blank but should be something really simple that i did not notice or something much more theoryc that i don’t know still
Using $().each since i have different ID’s but if do not use Each my console returns error not being able to read element top position.
Also i would really love any advice about making it simplier or just better performance wise thanks!

Tags:

2

Answers


  1. 0

    The problem it would seem is that you’re returning from an inner function you defined in the each call. Define a variable before your each call, and then set it to true or false in the function called by each. After the each call return that variable.

    Login or Signup to reply.
  2. 0

    The problem is the function check_if_in_view does not return anything at all, and in the context of an if statement, evaluates the same as false. JS community calls this "falsy".

    The root cause is you’re checking each element in a loop and "returning" from the inner function, but not from the outer function.

    This is where the inner (unnamed/anonymous) function starts: $(el).each(function()

    One possible fix you could use is to return true only if every loop of the inner loop also returns true. Check out the Array.every method for a concise way to do it.

    function check_if_in_view() { 
  // ...
  var allgood = true;
  $(el).each(function() {
    if (!condition) { allgood = false; }
  });
  return allgood; // summary of the whole .each loop
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search