When in browser view trigger event jQuery

Question

Is there a way to trigger an event in jQuery when the client has an element in their viewport?

So for example lets say I select this element in jQuery:

$('#star')

Then immediately when that element is visible in the viewport I'd like to run an animation.

Any idea if there is a way to do this as I have checked the documentary at jQuery and I can't find an event that does this.

Thanks

Give a try to this answer: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 — K K, Jan 09 '16 at 12:48

score 2 · Answer 1 · answered Jan 09 '16 at 12:44

2

Try this code

$(function() {
   if ($("#star").length > 0) {
      //do something 
   }
});

.length() can be used to find whether an element exist.

answered Jan 09 '16 at 12:44

siva

score 0 · Answer 2 · answered Jan 09 '16 at 12:42

If this selector $('#star') return anything then its already in the browser/viewport. In that case you could use:

if (document.getElementById('star')) {
    // do something
}

or

var star = $('#star');
if (star.length) {
    start.trigger('click');
    // or something else you need
}

If you want to fire something when the page loads you are better off with:

$(function(){
    // do something because the DOM is ready
});

2 Answers2