Viewers: in countries Watching now:
Follow along with author Justin Putney as he uses open technologies (HTML5, jQuery, and CSS) to create a dynamic presentation slideshow that responds to mobile and desktop layouts. Learn to customize the slideshow to fit your next project, and to display artwork, photography, and other kinds of content.
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.
Let's take a look at another common presentation feature which is going to full screen. It'd be really nice if our presenter can have the presentation take over the whole screen and not have to see bits of the browser window. So I'm going to switch over the browser here and just show you where I'm getting the code for this. This is John Dyer's site and you can download it form here. Also got the snippet saved in the snippet text file here. So if I switch over to the exercise files in Chapter 4 > 04_04 there is a snippet text file then I open this up to rather large bit of code.
So I'm going to scroll back up. And we want this in our ready function. And let's put it below the swipe functionality. So I want this, double-click actually to be read on the document level. I'll type dollar sign, open paren, document, close paren, and dblclick for double-click and then function. Open, close paren, open bracket and then I'm going to access this full screen API by typing window.fullScreenAPI, and then I want to type requestFullScreen. And inside that, I'm going to tell it to take the whole body of the document and make that full screen.
I can select individual elements, like videos, and this case I'm making the entire body full screen. And lets close the bracket, close paren, and semi-colon to end the line. I'm going to save that, switch back over to the Finder, and open the index.html file in the web browser. Now let's double-click and see if it goes to full screen. And the reason I didn't add any code to get out of full screen mode is because Escape is commonly used, and that basically takes care of the functionality for us. But of course you can add some extra code, if you want double-click to toggle you in and out of full screen mode.
Now, if I were previewing this in Firefox, everything would look perfect right now, but since I happen to be in Chrome, there's a little bit of a style issue where the start of the document is actually right in the middle of the screen here. This isn't what we want, so let's Escape out of full screen, switch back to the snippets. Text here and grab this block of CSS. Kind of a large block to type. We're just going to copy the whole thing and go back to the finder and in this CSS folder, we're going to open the styles.css file.
Scroll to the bottom, and paste in this block of CSS. And essentially this is setting all of the defaults for webkit browsers, which Chrome happens to be or used to be very recently. And makes these defaults like Firefox. So we're setting the width and the height. Making sure the background color is black, setting the position, and making sure everything is zeroed out, zero margin, setting the box-sizing and containing everything in there.
So, let's save that CSS, switch back over to the browser. Refresh, maybe even twice, just to make sure that code takes effect, and then I'm going to double-click, and there we are in full screen. Let's make sure all of our navigation works. Click the right arrow key, up arrow key, down arrow key, left arrow key, space bar, space bar. There we go. It even scrolls in this case. This is a slightly smaller screen than it's designed for. Maybe that's something we want to take into account. Shrink this margin at the top if we know the size the screen is going to be presented on.
But all of our navigation is working, so it looks pretty good for full screen.
There are currently no FAQs about HTML5 Projects: Creating a Responsive Presentation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.