Add a class to all elements that are in current window

Question

How can I add a class to all elements of the .column class that are currently visible in the viewport / currently in the window?

For example, in pseudo-code something like this:

If(in window){
    If has class .column{
        add class .swoosh;
    }
}

I would greatly appreciate any help in accomplishing this in javascript or jQuery.

Come on guys, a quick google check gives you a result: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport — Populus, Jul 05 '13 at 14:01
The question is how do you "hide" the elements, if you hide them with display: none, the you can search for that elements. If you hide them outside using position, the you have to look for their position. So depens in how do you hide them. — daver, Jul 05 '13 at 14:02
@daver The question doesn't say anything about hiding elements. — Barmar, Jul 05 '13 at 14:05
You are right but is good to know the initial and the end state, for a better answer — daver, Jul 05 '13 at 14:08
I'm pretty sure all you need is $('.column').addClass('swoosh'); — chrislondon, Jul 05 '13 at 15:35

score 3 · Answer 1 · answered Jul 05 '13 at 14:01

3

Have a look at this jQuery plugin; http://www.appelsiini.net/projects/viewport

It allows you to use an :in-viewport selector to check whether an element is in the current viewport.

$('.column:in-viewport').addClass ('swoosh');

answered Jul 05 '13 at 14:01

RobinJ

4,186
7
30
56

This works except on scroll, I need the new things in the viewport to get the class swoosh. – Django Johnson Jul 05 '13 at 16:22
I'm trying to use `$(window).scroll(function(){...` but that doesn't seem to be working with this. How can I add the class swoosh to everything in the viewport even the new things that are in the viewport when I scroll. – Django Johnson Jul 05 '13 at 16:33
Try using `.on ('scroll, ...)` in stead of `.scroll ()`. – RobinJ Jul 05 '13 at 18:07

Jacob Brown · Answer 2 · 2013-07-05T17:29:29.417

1

function isElementInViewport(el) {
    // from http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
    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() */
        );
}

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

var do_it;
$('.column').checkViewportAndSetClass();

$(window).on("scroll", function() {
  clearTimeout(do_it);
  do_it = setTimeout(function() { 
    $('.column').checkViewportAndSetClass();
  }, 1000);
});

This hasn't been tested but should work. checkViewportAndSetClass will be called when the user scrolls after a 1 second delay (so that it is not running constantly).

edited Jul 05 '13 at 17:29

answered Jul 05 '13 at 13:57

Jacob Brown

6,571
2
23
46

I'm trying to add the class to everything in the viewport, even the new things that are in the viewport on scroll. How can I add the class swoosh to everything in the viewport even the new things that are in the viewport when I scroll? – Django Johnson Jul 05 '13 at 16:36
I've updated my answer--it should do what you are asking. You may want to modify this code if you wish to not remove the `swoosh` class when an item goes out of the viewport or if you don't want to set a timeout on the scroll event. – Jacob Brown Jul 05 '13 at 16:49
What I am trying to do is to add the class to all things in the viewport on page load. Then on scroll the new things that are also now in the viewport get the class. Your code doesn't seem to be working in this codepen: http://codepen.io/anon/pen/LCKpd – Django Johnson Jul 05 '13 at 17:18
I had a syntax error in defining `checkViewport...`. It's corrected and confirmed working in this JSFiddle: http://jsfiddle.net/6rH55/2/. I also added a line to call the `checkViewport` function on pageload. – Jacob Brown Jul 05 '13 at 17:30

score 1 · Answer 3 · answered Jul 05 '13 at 14:01

1

You would need a way to select element which are withing viewport.

Following library looks good.

http://www.appelsiini.net/projects/viewport

After adding that library on top of jquery. You can do

$(".column:in-viewport").addClass("swoosh");

answered Jul 05 '13 at 14:01

Vishwanath

6,027
4
34
56

I wonder why someone downvoted this. – Barmar Jul 05 '13 at 14:02
Why would this get a DV, and a nearly identical one get upvoted? – Jul 05 '13 at 14:03
I need this to work on scroll so that the new things that are in the viewport on scroll also get the class swoosh. How can I do that? – Django Johnson Jul 05 '13 at 16:34
I'm trying to use `$(window).scroll(function(){...` but that doesn't seem to be working with this. How can I add the class swoosh to everything in the viewport even the new things that are in the viewport when I scroll. – Django Johnson Jul 05 '13 at 16:35

Stefan · Answer 4 · 2013-07-06T11:33:37.243

1

Or if you decide to go the plugin-less way - this code checks if the element is above or below the top or bottom edge of the scrolled window.

jsFiddle

Using CodePen because jsFiddle is dead for me right now.

$(window).scroll(function () {
    var windowSize = $(window).height();
    var windowPosition = $(window).scrollTop();
    var control = $(".element");
    control.each(function () {
        var elementPosition = $(this).position().top;
        var elementHeight = $(this).height();
        var elementInWindow = (windowSize + windowPosition > elementPosition) - (windowPosition - elementHeight < elementPosition);
        if (elementInWindow == 0) {
            $(this).addClass("blue");
        } else {
            $(this).removeClass("blue");
        }
    });

});

edited Jul 06 '13 at 11:33

answered Jul 05 '13 at 14:57

Stefan

1,096
8
10

JSFiddle is dead for me too. Thank you, this seems to work. And I would prefer to go plugin-less. Can you explain to me how this works? – Django Johnson Jul 05 '13 at 16:28
Actually, I am trying to use this so that the things in the original viewport have a blue background and then on scroll the the things in the viewport also get the class visible and are turned blue, but it doesn't seem to be working. Here is a codepen: http://codepen.io/anon/pen/fnvkJ – Django Johnson Jul 05 '13 at 16:41
I think that is the same codepen from the post do you have another one or a jsFiddle if it's back on? – Stefan Jul 06 '13 at 07:29
@DjangoJohnson I edited the post, see if the new jsFiddle works the way you like. – Stefan Jul 06 '13 at 07:45

score 0 · Answer 5 · answered Jul 05 '13 at 13:59

0

i have not tried it... but you can take a look here and do something like:

$(":onScreen").find(".column").addClass("swoosh")

answered Jul 05 '13 at 13:59

avi

929
8
21

Add a class to all elements that are in current window

5 Answers5