.addClass() not working outside of JS Fiddle

Question

I'm trying to add a class to all instances of the .column class that are in the viewport.

This JS Fiddle add a class .swoosh to all .column in the viewport, but when I use the same exact js with my markup it does not add the .swoosh class to the .column in the viewport.

I checked if jquery is loading and it is.
The code is valid because it works on JS Fiddle

But for some reason, the .column in the viewport in this page are not getting the class .swoosh.

Here is the JS Fiddle again.

Here is the live page again.

Here is the code I am trying to run:

function isElementInViewport(el) {
var rect = el.getBoundingClientRect();

return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document. documentElement.clientWidth)
    );
}

$.fn.checkViewportAndSetClass = function() {
  $(this).each(function(){
     if (isElementInViewport(this)) {
      $(this).addClass("swoosh");
    } 
  });
 };
$('.column').checkViewportAndSetClass();

 $(window).on("scroll", function() {
    $('.column').checkViewportAndSetClass();
});

score 2 · Accepted Answer · answered Jul 07 '13 at 20:18

2

You aren't including jQuery on your page. In the console: 'Uncaught ReferenceError: $ is not defined '. You can link to the google cdn copy by adding the following to your <head>:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

answered Jul 07 '13 at 20:18

mcbex

446
4
8

$(document).ready() isn't necessary in this case because the event is being bound to the window – mcbex Jul 07 '13 at 20:30
All the instances of `.column` in the viewport are still not getting the `.swoosh` class. Check the link to my live page, I added jQuery and it loads. – Django Johnson Jul 07 '13 at 21:00
I just looked again and I can see the 'swoosh' class on your elements – mcbex Jul 07 '13 at 21:14
When I view the link in chrome and use chrome's dev tools, it says the `.swoosh` class is not added. This is what I see in dev tools: https://docs.google.com/file/d/0BwJVaMrY8QdcbHFDaEl4a3JIMHM/ – Django Johnson Jul 07 '13 at 21:19
If I load your page, scroll the scrollbar, then inspect the element (Chrome dev tools) I see this: `
1
`. I'm not sure what you are expecting but the code is doing what it's supposed to do – mcbex Jul 07 '13 at 21:25
1

Oh my bad, are you are expecting the first call to `checkViewportAndSetClass` to set the class? It's probably not working until you scroll the window because the elements are being animated onto the page. So I'm guessing `if (isElementInViewport(this))` will return false at the time that line of code is executed. Try waiting until the animation is done before calling `checkViewportAndSetClass` – mcbex Jul 07 '13 at 21:33
Oh, that is a good point. Since the animation is actually moving the elements they are probably not technically in the viewport when the javascript runs. I will try postponing it until after. – Django Johnson Jul 07 '13 at 21:35
No problem - glad you got it! :) – mcbex Jul 07 '13 at 21:46

score 1 · Answer 2 · answered Jul 07 '13 at 20:14

1

You aren't loading the jquery library in your live page. Also, you should wrap your code in a

$(document).ready(function() {

})

answered Jul 07 '13 at 20:14

sberry

128,281
18
138
165

Now, I am loading jquery, but it is still not working. Check the live page again. – Django Johnson Jul 07 '13 at 21:01

.addClass() not working outside of JS Fiddle

2 Answers2