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

[Davo Smith]

>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 <http://imakewebthings.com/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 <http://prinzhorn.github.io/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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://ofb.biz/pipermail/christiansource_ofb.biz/attachments/20130703/afcfaeff/attachment.htm>