jQuery: notification of visible html elements

Question

I want to be able to find out when a page element is on or off the viewers screen. Specifically, I'd like to be able to "turn off" an html 5 canvas (Processing.js) script if the user has scrolled past the canvas and back on when it is visible again in the users browser.

Does this make sense? I am thinking that there must be some way for the DOM to fire off a notification via ajax to turn on and off the canvas script.

thanks.

/////////// EDIT (final code) ////////// Here is the final code that I used:

$(window).bind('scroll', function(){
   var $canvas = $('#canvas');
   var pos     = $canvas.offset();
   var total = pos.top + $($canvas).height();
   var wndtop  = $(this).scrollTop();

   if(wndtop <= pos || wndtop >= total ){ 

   }

});

Try http://www.appelsiini.net/projects/viewport , it lets you select elements depending if they are currently viewable you could check it on every scroll event? — Adam, Jul 15 '10 at 20:10

jAndy · Accepted Answer · 2010-07-15T20:23:10.117

3

You can attach an event handler to the window scrolling. Like

$(window).bind('scroll', function(){
   var $canvas = $('#hlogo');
   var pos     = $canvas.offset();
   var wndtop  = $(this).scrollTop();
   var wndleft = $(this).scrollLeft();

   if(wndtop <= pos.top && wndleft <= pos.left)
      $canvas.hide();
});

edited Jul 15 '10 at 20:23

answered Jul 15 '10 at 20:10

jAndy

231,737
57
305
359

score 0 · Answer 2 · answered Jul 15 '10 at 20:11

0

You can do that by using DOM properties element.y, element.style,height and window.scrollY.

answered Jul 15 '10 at 20:11

srigi

1,682
1
15
30

score 0 · Answer 3 · edited May 23 '17 at 10:32

0

You should be able to adjust the code in the link below to your needs. Check if element is visible after scrolling

edited May 23 '17 at 10:32

Community

1
1

answered Jul 15 '10 at 20:12

Fabian

13,603
6
31
53

jQuery: notification of visible html elements

3 Answers3