Join Justin Putney for an in-depth discussion in this video Adding click and keyboard navigation, part of Creating a Responsive Presentation in HTML5.
So, now that we've got all the functions in place to navigate from slide to slide.…Let's wire it together with the keyboard so that the user can actually change slides.…So, let's start where we left off and go into Chapter 3, 0302 in the "start"…folder, and then in the "JS" folder Open up that pres.js file.…Here it is in Dream Weaver. And add a line inside the ready function,…and we're going to use the dollar sign, J query function to access the entire document.…
And what we're going to listen for is the key up.…The reason we're listening for the key up as opposed to the key down for instance,…is that we want to make sure that this gets fired only once.…The key down event can be fired over and over by holding the key.…We don't want the presenter to actually skip forward a whole bunch of slides.…The reason we're not using the key press function is that it doesn't support all…the keys we need to access. So key up call that as a function and then…inside that we are going to pass it a argument which is a function.…
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