CODEWITHSUNDEEP
javascriptjquery
user1091856
user1091856

Reputation: 3158

When element is not on screen anymore?

In my website, there is a floating cloud(element) that scrolls rightwards, and I wanna be able to tell when it's not visible anymore on screen.

How can I do it?

setInterval(function(){
    if(!jQuery('.sa_cloud_l').is(':visible')){
        alert('not visible anymore');
    }else{          
        c1.css('left', '+=21');
    }
},100);

Upvotes: 0

Views: 132

Answers (4)

Ram
Ram

Reputation: 144689

:visible only selects the elements that their CSS display properties are not none. You can use offset() method.

var width = $(window).width();

setInterval(function(){
        if ( $('.sa_cloud_l').offset().left > width ) {
            alert('not visible anymore');
        } else {          
            c1.css('left', '+=21');
        }
},100);

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

if ($(window).scrollLeft() <= $(this).offset().left 
    && $(this).offset().left < $(window).width()+$(window).scrollLeft()
    && $(window).scrollTop() <= $(this).offset().top 
    && $(this).offset().top < $(window).height()+$(window).scrollTop()) {
    // at least part of 'this' is within the window
}

Upvotes: 1

jcubic
jcubic

Reputation: 66488

Check jquery plugin viewport http://www.appelsiini.net/projects/viewport

Upvotes: 1

aknosis
aknosis

Reputation: 4308

The :visible selector does not account for being inside the viewport of browser.

http://api.jquery.com/visible-selector/

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation. During animations to show an element, the element is considered to be visible at the start at the animation.

Upvotes: 1

Related Questions