Uncaught TypeError: Cannot read property 'each' of undefined

Question

I am getting : Uncaught TypeError: Cannot read property 'each' of undefined at animateIfInview at atonscroll

and heres the code :

 <script>
 function animateIfInView() {
 $.each($("content-img"), function(key, value) {
 if (isElementInViewport($(value))) {
 $(value).addClass("content-img-in-view");
 } else {
  // (Optional) Fade out when out of view
  $(value).removeClass("content-img-in-view");
  }
  });
  }

  // http://stackoverflow.com/a/7557433/5628
   function isElementInViewport(el) {
    //special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
  el = el[0];
  }

  var rect = el.getBoundingClientRect();

  return (
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <=
  (window.innerHeight ||
  document.documentElement.clientHeight) /*or $(window).height() */ &&
  rect.right <=
  (window.innerWidth ||
  document.documentElement.clientWidth) /*or $(window).width() */
  );
  }
  </script>

How can I fix this error? what am I missing in code? Thanks guys in advance

This: `$("content-img")` is an incorrect selector. Is this for a ID or a Class? — Twisty, Jun 06 '17 at 17:29
its for a class,so every image on that page do same fade in on scroll thing — nellement, Jun 06 '17 at 17:31

score 0 · Answer 1 · answered Jun 06 '17 at 17:35

0

I would suggest the following:

function animateIfInView() {
  $(".content-img").each(function(key, elem) {
    if (isElementInViewport($(elem))) {
      $(elem).toggleClass("content-img-in-view");
    }
  });
}

The class selector uses $(".className"), where your code is missing the . in it. Also, if using elements, it is suggested to use .each() versus $.each() which is suggests for Arrays and Objects.

answered Jun 06 '17 at 17:35

Twisty

30,304
2
26
45

Thank you much,I will try it out when I get on work pc,will let you know and vote you if it works – nellement Jun 06 '17 at 17:36
For some reason nothing changes :( dont know why – nellement Jun 07 '17 at 01:06
Your code should work, as long as you use the right selector: `.content-img` – Twisty Jun 07 '17 at 14:49
can you pls check the page here : http://fracturize.me/work/snaaak-2-11/ ,maybe you can see what is wrong,thanks in advance man – nellement Jun 07 '17 at 14:59
@nellement I found two syntax errors right away that will need to be addressed. SyntaxError: missing ; before statement snaaak-2-11:474:37 & SyntaxError: expected expression, got '<' snaaak-2-11:917 – Twisty Jun 07 '17 at 15:14
Can you sharescreenshot of that error pls,so I can find it in html and fix,Im sorry for bugging you like this,but I'm really coding noob,trying to make stuff work somehow – nellement Jun 07 '17 at 16:09
Ok found the error console,just need to find it in code and try fix,thanks man hope it works out – nellement Jun 07 '17 at 16:58
Just tried fixing all thats in red error,but it doesnt work for some reason and it kiling me becasue no clue why – nellement Jun 07 '17 at 17:20

score 0 · Answer 2 · answered Jun 06 '17 at 17:51

0

jQuery.each(array/object,callback_function);

require first parameter as an array or an object. Read documentation here . I suggest to use var obj = $(document).find(".content-img"); then use as

$.each(obj,function(key,value){
//your code goes here
});

answered Jun 06 '17 at 17:51

Bikash Waiba

160
3
11

Can you tell me more what code to ad on top of mine in original post to make this work? Thanks in advance – nellement Jun 07 '17 at 01:09

Uncaught TypeError: Cannot read property 'each' of undefined

2 Answers2