Hey there I was wondering if anyone could help me figure something out… I have a CMS collection list on a page, and I am trying to add keyboard navigation to the list. Essentially, I want the up and down arrow keys to hover/focus the previous/next cms item, and the enter key to open the link. I found some code examples online but I can’t get any to work.
This is the custom code I found/am using and the jsfiddle of it
<script>
var journalListItem = $('journal-list-item');
var journalListItemSelected;
$(window).keydown(function(e){
if(e.which === 40){
if(journalListItemSelected){
journalListItemSelected.removeClass('selected');
next = journalListItemSelected.next();
if(next.length > 0){
journalListItemSelected = next.addClass('selected');
}else{
journalListItemSelected = journalListItem.eq(0).addClass('selected');
}
}else{
journalListItemSelected = journalListItem.eq(0).addClass('selected');
}
}else if(e.which === 38){
if(journalListItemSelected){
journalListItemSelected.removeClass('selected');
next = journalListItemSelected.prev();
if(next.length > 0){
journalListItemSelected = next.addClass('selected');
}else{
journalListItemSelected = journalListItem.last().addClass('selected');
}
}else{
journalListItemSelected = journalListItem.last().addClass('selected');
}
}
});
e.preventDefault();
</script>
Here is my site Read-Only: LINK. Specifically, I am trying to make this work on the “Journal” page.