2

I'm currently working on a web comic application and as you read further into the comic you use the arrow keys (left and right) to show whichever the next panel is. What I'm looking to do is shift focus each time the arrows are used and initiate slight animations when elements are in focus for the first time on the page.

If elements that have already been in focus get focus again, the animations do not repeat.

I've got everything pretty much down I just need to loop through tabindex in order to shift focus correctly and I don't know how to do that. Very new to the StackOverflow community so I'm excited to hear some responses!

Nick Nutting
  • 37
  • 1
  • 5

1 Answers1

1

I am not sure if you can directly access all the elements which have tabIndex registered. Other way would be to maintain all you elements in an array and then for every keydown event you change the focus. Something similar to:

<!DOCTYPE html>
<html>
<body onkeydown="keyDownFn()" onload="init()">

<p>Try navigating the links below by using any key on you keyboard </p>

<p><div id="myAnchor1" tabIndex="1">Link 1</div></p>
<p><div id="myAnchor2" tabIndex="1">Link 2</div></p>
<p><div id="myAnchor3" tabIndex="1">Link 3</div></p>

<script>
var elements;
var current = 1;
var max = 0;
function keyDownFn() {
    // you can add a check for specific keys here.
    elements[current % max].focus();
    current = current+1;
}

function init() {
    // all elements that you want to focus in turn can be stored on load.
    elements = document.getElementsByTagName('div');
    max = elements.length;
    document.getElementById("myAnchor1").focus();
}

</script>

</body>
</html>

Fiddle at https://jsfiddle.net/4my90g4v/

focus() should invoke the onFocus method registered on you elements where you are doing the animations.

Anurag Sinha
  • 1,014
  • 10
  • 17
  • Thank you Anurag Sinha! Do you think I should put animations inside of my focus functions? Also, could you show me how to throw all of my work into an array to test your second idea. Considering I will have multiple pages depending on these set of functions I think I'll need to defer to something like that as it will be much easier. – Nick Nutting Dec 29 '16 at 19:50
  • Also I need my code to be based around left and right arrows and moving forward and backward. This code you've shown just sits on math to move it forward. The actual event itself doesn't matter. Does that make sense? – Nick Nutting Dec 29 '16 at 19:56
  • Here is the updated fiddle, you can continue using onKeyDown event listener. Only change you have to make is receive the event object which has all the details about the event(refer keyDownFn function at the updated fiddle). From the event object use the keyCode to get which key was pressed and based on that you can update your logic. I have updated the fiddle - refer https://jsfiddle.net/4my90g4v/1/ This now changes the focus based on left and right arrows(keyCode 37 and 39). Hopefully this will help. – Anurag Sinha Dec 30 '16 at 17:37
  • Regarding your 1st comment, yes, you can add your animation inside the focus method. You can hold ids of the pages in an array. Or it could be any other identifier which helps you identify your current page that is coming into view. – Anurag Sinha Dec 30 '16 at 17:41
  • another link which talks about identifying which key is pressed : http://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript – Anurag Sinha Dec 30 '16 at 17:42
  • Could you show me a way to stop the function from looping around to the first element with the myAnchor id? That way it stop once it gets to a certain point? – Nick Nutting Jan 12 '17 at 01:15