Join Justin Putney for an in-depth discussion in this video Solution: Customized keyboard navigation, part of Creating a Responsive Presentation in HTML5.
Alright time's up, pencil's down and here's the solution at least the one I…came up with. So, we've got our existing keyboard…navigation, you can't see this but trust me, I'm hitting the right arrow key and…the down arrow key, the up arrow key and the left arrow key, all the way back to…the beginning. Got the swipe in place there and now, if I…hit the space bar, it will also take me forward.…So let's switch over to DreamWeaver and see the code.…Here's the code, just have another or block here essentially inside our if…statement and we're checking for the key code 32.…
And how did I get that key code? It's the same way we did the other ones.…From the J query API, under the keyup definition, just go into this type…something field, hit the space bar and I get 32 as the key code.…So hopefully, you got that too, hopefully this was pretty simple for you.…Take a look at the next challenge, it's going to be a little bit more complicated.…
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you're ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout