Question

So I am working on a keyboard forward- and back-script like they have on Tumblr and 9GAG (you can navigate the posts using your J and K keys).

My approach:

User presses J (next) key

Javascript uses JQuery Viewport to find out which "Jump"-ID is currently in:viewport

Javascript adds +1 to the "Jump"-ID

Javascript gets the position of the increased "Jump"-ID, scrolls there

Now the problem is the following:

<div class="content jump" id="<?php echo $id; ?>">

I already defined the id of the div. So it looks like this:

<div class="content jump" id="1225">
<div class="content jump" id="1299">
<div class="content jump" id="1206">
<div class="content jump" id="1345">

However, in order to be able to jump in the right order I somehow need to store an additional identification, maybe like this…

<div class="content jump" id="1225" jump="1">
<div class="content jump" id="1299" jump="2">
<div class="content jump" id="1206" jump="3">
<div class="content jump" id="1345" jump="4">

That’s just my imagination. There should be a way around this. If you have a better solution to the J / K problem, you are also free to tell me (maybe Tumblr or 9GAG has a much better one?)

Answer 1

You can use data- attributes. For example:

<div class="content jump" id="1225" data-jump="1">

You can then fetch that data by using

$('#1225').data('jump');