Revealing save options


show more Revealing save options provides you with in-depth training on Design. Taught by Joseph Lowery as part of the HTML5 Projects: Customized Photo Cards show less
please wait ...

Revealing save options

We're in the final lap, where we allow the user to save the image. But first, we want to tell them exactly how to store that combined graphic. For that, we'll use a little JavaScript hoodoo to hide the fact that there isn't really a fourth page in this application. When the user clicks Save, the step number changes, and a different, detailed message appears. So, let's go into modify.php, and I'm going to scroll down to where the message is.

Here you see it on line 50. I'm going to wrap that h1 tag in a div. I'll give that div an ID of steps. And let me take that closing div there and put it after the h1. Excellent! So now we can target that h1 in JavaScript. And for that, I'll go up to my JavaScript function here, and we'll add in another function.

Here, we're going to listen for a click event for saveImage, and saveImage, if I scroll down just a bit, is the ID for the save button in navigation. We'll enter in a dollar sign, and then open and closi...

Revealing save options
Video duration: 3m 45s 44m 20s Intermediate

Viewers:

Revealing save options provides you with in-depth training on Design. Taught by Joseph Lowery as part of the HTML5 Projects: Customized Photo Cards

Subjects:
Design Web
Software:
HTML JavaScript CSS
Author:
please wait ...