<div dir="ltr">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: <a href="https://dojotoolkit.org/reference-guide/1.7/dojo/position.html">https://dojotoolkit.org/reference-guide/1.7/dojo/position.html</a><div>

<br></div><div style>Combining that with the window::getBox function ( <a href="http://dojotoolkit.org/reference-guide/1.9/dojo/window/getBox.html">http://dojotoolkit.org/reference-guide/1.9/dojo/window/getBox.html</a> ), which tells you the height of the current viewport and the 'scroll' event ( <a href="http://stackoverflow.com/questions/14279343/dojo-window-onscroll">http://stackoverflow.com/questions/14279343/dojo-window-onscroll</a> ) which fires when you scroll the window, you should be able to do the following:</div>

<div style><br></div><div style>When the window scroll event happens:</div><div style>- compare the position of the top of the node with the height of the viewport</div><div style>- 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).</div>

<div style><br></div><div style>Davo</div></div><div class="gmail_extra"><br><br><div class="gmail_quote">On Wed, Jul 3, 2013 at 9:51 PM, Timothy Butler <span dir="ltr"><<a href="mailto:tbutler@ofb.biz" target="_blank">tbutler@ofb.biz</a>></span> wrote:<br>

<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word">Hey, everyone,<br>I posted this just a bit ago over at StackOverflow and thought I'd survey folks on the listserves too:<br>

<div><br></div><div><p style="clear:both;vertical-align:baseline;line-height:18px;text-align:left;font-size:14px;font-family:Arial,'Liberation Sans','DejaVu Sans',sans-serif;margin:0px 0px 1em;word-wrap:break-word;border:0px;padding:0px">

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:</p>

<pre style="margin-top:0px;margin-bottom:10px;padding:5px;border:0px;font-size:14px;vertical-align:baseline;background-color:rgb(238,238,238);font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;overflow:auto;width:auto;max-height:600px;line-height:18px;text-align:left">

<code style="margin:0px;padding:0px;border:0px;vertical-align:baseline;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif"><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)"><div</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"> </span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(255,0,0)">id</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">=</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(0,0,255)">"1"</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)">></span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">Node 1</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)"></div></span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">
</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)"><div</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"> </span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(255,0,0)">id</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">=</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(0,0,255)">"2"</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)">></span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">Node 2</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)"></div></span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">
</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)"><div</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"> </span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(255,0,0)">id</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">=</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(0,0,255)">"3"</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)">></span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">Node 3</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)"></div></span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">
</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)"><div</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent"> </span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(255,0,0)">id</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">=</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(0,0,255)">"4"</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)">></span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">Node 4</span><span style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(128,0,0)"></div></span></code></pre>

<p style="clear:both;vertical-align:baseline;line-height:18px;text-align:left;font-size:14px;font-family:Arial,'Liberation Sans','DejaVu Sans',sans-serif;margin:0px 0px 1em;word-wrap:break-word;border:0px;padding:0px">

Assuming only the first two <code style="margin:0px;padding:1px 5px;border:0px;vertical-align:baseline;background-color:rgb(238,238,238);font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif"><divs></code> 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.)</p>

<p style="clear:both;vertical-align:baseline;line-height:18px;text-align:left;font-size:14px;font-family:Arial,'Liberation Sans','DejaVu Sans',sans-serif;margin:0px 0px 1em;word-wrap:break-word;border:0px;padding:0px">

The <a href="http://imakewebthings.com/jquery-waypoints/" rel="nofollow" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(74,107,130);text-decoration:none" target="_blank">jQuery Waypoints</a> 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 <em style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent">other</em> than Dojo (I'm fine with it using Dojo or no library at all).</p>

<p style="clear:both;vertical-align:baseline;line-height:18px;text-align:left;font-size:14px;font-family:Arial,'Liberation Sans','DejaVu Sans',sans-serif;margin:0px 0px 1em;word-wrap:break-word;border:0px;padding:0px">

 It appears <a href="http://prinzhorn.github.io/skrollr/" rel="nofollow" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background-color:transparent;color:rgb(74,107,130);text-decoration:none" target="_blank">Skrollr</a> 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?</p>

<p style="clear:both;vertical-align:baseline;line-height:18px;text-align:left;font-size:14px;font-family:Arial,'Liberation Sans','DejaVu Sans',sans-serif;margin:0px 0px 1em;word-wrap:break-word;border:0px;padding:0px">

Thanks,</p><p style="clear:both;vertical-align:baseline;line-height:18px;text-align:left;font-size:14px;font-family:Arial,'Liberation Sans','DejaVu Sans',sans-serif;margin:0px 0px 1em;word-wrap:break-word;border:0px;padding:0px">

Tim</p></div><span class="HOEnZb"><font color="#888888"><br><br><div>
<div><b>Timothy Butler</b></div><div><a href="mailto:tbutler@ofb.biz" target="_blank">tbutler@ofb.biz</a></div><div><br></div><br>

</div>
<br></font></span></div><br>_______________________________________________<br>
ChristianSource FSLUG mailing list<br>
<a href="mailto:Christiansource@ofb.biz">Christiansource@ofb.biz</a><br>
<a href="http://cs.uninetsolutions.com" target="_blank">http://cs.uninetsolutions.com</a><br></blockquote></div><br></div>