[CS-FSLUG] OT: JavaScript: Detecting Item within Viewport

[Timothy Butler]

Thanks, Davo! You definitely got me going in the right direction with those tips. After looking over those docs, I was able to put together a workable bit of code. If you'd like to see the final result:

http://stackoverflow.com/questions/17456279/finding-out-which-elements-are-in-the-viewport-in-dojo/17477358#17477358

As I note there, there may be ways to make it more efficient... I'm thinking on that...

Thanks again!

Blessings,
Tim

Timothy Butler
tbutler at ofb.biz



On Jul 3, 2013, at 4:47 PM, Davo Smith <christiansource at davosmith.co.uk> wrote:

> From a quick look at the Dojo docs (as a Moodle developer, I'm much more familiar with YUI), there appears to be a 'position' function that, by default, tells you the position of a DOM node within the current viewport: https://dojotoolkit.org/reference-guide/1.7/dojo/position.html
> 
> Combining that with the window::getBox function ( http://dojotoolkit.org/reference-guide/1.9/dojo/window/getBox.html ), which tells you the height of the current viewport and the 'scroll' event ( http://stackoverflow.com/questions/14279343/dojo-window-onscroll ) which fires when you scroll the window, you should be able to do the following:
> 
> When the window scroll event happens:
> - compare the position of the top of the node with the height of the viewport
> - if the top of the node is less than the height of the viewport, trigger your function (you might want to calculate the bottom of the node instead, to make sure it is fully on-screen).
> 
> Davo
> 
> 
> On Wed, Jul 3, 2013 at 9:51 PM, Timothy Butler <tbutler at ofb.biz> wrote:
> Hey, everyone,
> I posted this just a bit ago over at StackOverflow and thought I'd survey folks on the listserves too:
> 
> I would like to fire a function when a user is scrolling and reaches a certain element, so that I can mark that element "read" (think of how posts were marked read after viewing them in the now defunct Google Reader). So, for example, imagine a page like the following:
> 
> 
> <div id="1">Node 1</div>
> <div id="2">Node 2</div>
> <div id="3">Node 3</div>
> <div id="4">Node 4</div>
> Assuming only the first two <divs> fit within the viewport, I would like to use Dojo's event listener and fire an event when div 3 came into view and again when div 4 came into view. (In addition to my goal of recording when an element has been read, this would also allow me to easily implement infinite scrolling.)
> 
> The jQuery Waypoints tool seems to do exactly what I want, but since most of my code uses Dojo, I really don't want to use jQuery just for this one task. I'd like to find a prewritten tool or simple method for doing this that isn't dependent on a library/toolkit other than Dojo (I'm fine with it using Dojo or no library at all).
> 
>  It appears Skrollr also does what I am looking for, but only for animation -- that is, it can animate an element based on its relationship to the viewport. This doesn't exactly help, though, since my goal isn't animation but to activate a function (that will make an AJAX call via Dojo) when an element comes within the viewpoint. Suggestions?
> 
> Thanks,
> 
> Tim
> 
> 
> 
> Timothy Butler
> tbutler at ofb.biz
> 
> 
> 
> 
> _______________________________________________
> ChristianSource FSLUG mailing list
> Christiansource at ofb.biz
> http://cs.uninetsolutions.com
> 
> _______________________________________________
> ChristianSource FSLUG mailing list
> Christiansource at ofb.biz
> http://cs.uninetsolutions.com

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://ofb.biz/pipermail/christiansource_ofb.biz/attachments/20130704/a7e7ebbf/attachment.htm>