StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you really want some extensions, the closest to what you're doing sound like <a href="https://code.google.com/p/js-hotkeys/" rel="nofollow">this</a> or perhaps <a href="http://fredhq.com/projects/roundabout" rel="nofollow">this</a>.</p> <p>EDIT: Or perhaps <a href="http://pagescroller.com/" rel="nofollow">PageScroller</a>.</p> <p>But if you don't mind doing even just a little coding, JQuery has most of what you need built right in, and you could write your own extension. Something like:</p> <pre><code>$(document).on('keypress', function(ev) { if (ev.which == '106') { $('html,body').scrollTop($("#nextPost").offset().top); } else if (ev.which == '107') { $('html,body').scrollTop($("#prevPost").offset().top); } }); </code></pre> <p>Shorter version:</p> <pre><code>$(document).on('keypress',function(e) { id = (e.which == '106') ? getNextPost() : (e.which == '107') ? getPrevPost() : undefined; if (id) $('html,body').scrollTop($(id).offset().top); } </code></pre> <p>You could just replace #nextPost and #prevPost with functions which keep track of which post is "active." I often start my js files by defining tiny utility extensions like:</p> <pre><code>$.extend({ postRegister : { registry : '#defaultInitiallyActivePost', next : function() { this.registry = $(this.registry).next('.post').attr('id'); return this.registry; }, prev : function() { this.registry = $(this.registry).prev('.post').attr('id'); return this.registry; } } }); </code></pre> <p>EDIT: If you want the page to detect when the user has manually scrolled to a different post, you can just add a function that checks where the scrollbar currently is, cycles through the post elements on the page, checking their offsets to determine which post is being looked at.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload